import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import {
  AppFormField,
  AppFormGrid,
  AppFormTextField,
  getFormBorderColor,
  getFormSoftBg,
} from "@/components/ui/form";
import { AppSelect, type AppSelectOption } from "@/components/ui/select";
import { AppTextEditor } from "@/components/ui/text-editor";
import { AgencyDisplay } from "@/features/pswg/working-group-issues/components/create-issuses/agency-display";
import type { Agency } from "@/features/pswg/working-group-issues/components/create-issuses/add-working-group-issue-dialog-types";

type WorkingGroupIssueMainFieldsProps = {
  agencyOptions: AppSelectOption<Agency>[];
  categoryOptions: AppSelectOption[];
  description: string;
  governmentAgency: string;
  isLoadingCategories: boolean;
  isLoadingPrimaryGovernment: boolean;
  issue: string;
  categoryId: string;
  onDescriptionChange: (value: string) => void;
  onCategoryIdChange: (value: string) => void;
  onIssueChange: (value: string) => void;
  onRecommendationChange: (value: string) => void;
  onWorkingGroupNameChange: (value: string) => void;
  recommendation: string;
  workingGroupName: string;
};

export function WorkingGroupIssueMainFields({
  agencyOptions,
  categoryOptions,
  description,
  governmentAgency,
  isLoadingCategories,
  isLoadingPrimaryGovernment,
  issue,
  categoryId,
  onDescriptionChange,
  onCategoryIdChange,
  onIssueChange,
  onRecommendationChange,
  onWorkingGroupNameChange,
  recommendation,
  workingGroupName,
}: WorkingGroupIssueMainFieldsProps) {
  const theme = useTheme();
  const selectedGovernmentAgency = agencyOptions.find(
    (option) => option.value === governmentAgency,
  )?.data;

  return (
    <>
      <AppFormGrid sx={{ mb: 1.6 }}>
        <AppFormField label="Working Group Name" required>
          <AppFormTextField
            value={workingGroupName}
            onChange={(event) => onWorkingGroupNameChange(event.target.value)}
          />
        </AppFormField>

        <AppFormField label="Government Agency" required>
          <Box
            sx={{
              height: 40,
              display: "flex",
              alignItems: "center",
              px: 1.5,
              border: `1px solid ${getFormBorderColor(theme)}`,
              borderRadius: "6px",
              bgcolor: getFormSoftBg(theme),
              color: theme.palette.text.primary,
              cursor: "not-allowed",
              opacity: isLoadingPrimaryGovernment ? 0.72 : 1,
              "&:hover": {
                borderColor:
                  theme.palette.mode === "dark"
                    ? alpha(theme.palette.common.white, 0.28)
                    : "#CBD5E1",
              },
            }}
          >
            {isLoadingPrimaryGovernment ? (
              <Typography
                sx={{ fontSize: 12, color: theme.palette.text.secondary }}
              >
                Loading agency...
              </Typography>
            ) : (
              <AgencyDisplay agency={selectedGovernmentAgency} />
            )}
          </Box>
        </AppFormField>
      </AppFormGrid>

      <Box sx={{ mb: 1.6 }}>
        <AppFormField label="Issue" required>
          <AppFormTextField
            value={issue}
            onChange={(event) => onIssueChange(event.target.value)}
            placeholder="Write Issue title"
          />
        </AppFormField>
      </Box>

      <Box sx={{ mb: 1.6 }}>
        <AppFormField label="Issue Category" required>
          <AppSelect
            value={categoryId}
            options={categoryOptions}
            placeholder={
              isLoadingCategories
                ? "Loading issue categories"
                : "Select issue category"
            }
            onChange={onCategoryIdChange}
            disabled={isLoadingCategories}
          />
        </AppFormField>
      </Box>

      <Box sx={{ mb: 1.6 }}>
        <AppFormField label="Description of the Issue" required>
          <AppTextEditor
            placeholder="Write description ........"
            value={description}
            onChange={onDescriptionChange}
          />
        </AppFormField>
      </Box>

      <Box sx={{ mb: 1.6 }}>
        <AppFormField label="Recommendation" required>
          <AppTextEditor
            placeholder="Write Recommendation.........."
            value={recommendation}
            onChange={onRecommendationChange}
          />
        </AppFormField>
      </Box>
    </>
  );
}