import Box from "@mui/material/Box";

import {
  AppFormField,
  AppFormGrid,
  AppFormTextField,
} from "@/components/ui/form";
import { AppSelect } from "@/components/ui/select";
import type { AppSelectOption } from "@/components/ui/select";
import { AppTextEditor } from "@/components/ui/text-editor";
import { AgencyDisplay } from "@/features/pswg/plenary/components/add-issue-dialog/agency-display";
import type { Agency } from "@/features/pswg/plenary/components/add-issue-dialog/add-issue-dialog-types";
import { plenaryIssueAgencies } from "@/features/pswg/plenary/components/add-issue-dialog/plenary-issue-agencies";

type PlenaryIssueMainFieldsProps = {
  description: string;
  governmentAgency: string;
  issue: string;
  onDescriptionChange: (value: string) => void;
  onGovernmentAgencyChange: (value: string) => void;
  onIssueChange: (value: string) => void;
  onRecommendationChange: (value: string) => void;
  onWorkingGroupNameChange: (value: string) => void;
  recommendation: string;
  workingGroupName: string;
};

const agencyOptions: AppSelectOption<Agency>[] = plenaryIssueAgencies.map(
  (agency) => ({
    data: agency,
    label: agency.name,
    value: agency.id,
  }),
);

export function PlenaryIssueMainFields({
  description,
  governmentAgency,
  issue,
  onDescriptionChange,
  onGovernmentAgencyChange,
  onIssueChange,
  onRecommendationChange,
  onWorkingGroupNameChange,
  recommendation,
  workingGroupName,
}: PlenaryIssueMainFieldsProps) {
  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>
          <AppSelect
            value={governmentAgency}
            options={agencyOptions}
            placeholder="Select Agency"
            onChange={onGovernmentAgencyChange}
            renderSelectedValue={(option) => (
              <AgencyDisplay agency={option?.data} />
            )}
            renderOption={(option) => <AgencyDisplay agency={option.data} />}
          />
        </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="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>
    </>
  );
}