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 type { Agency } from "./add-issue-dialog-types";
import { AgencyDisplay } from "./agency-display";
import { plenaryIssueAgencies } from "./plenary-issue-agencies";

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

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

export function PlenaryIssueMainFields({
  description,
  governmentAgency,
  issue,
  recommendation,
  workingGroupName,
  onDescriptionChange,
  onGovernmentAgencyChange,
  onIssueChange,
  onRecommendationChange,
  onWorkingGroupNameChange,
}: PlenaryIssueMainFieldsProps) {
  return (
    <>
      <AppFormGrid sx={{ mb: 1.6 }}>
        <AppFormField label="Working Group Name" required>
          <AppFormTextField
            value={workingGroupName}
            placeholder="Enter working group name"
            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}
            placeholder="Write issue title"
            onChange={(event) =>
              onIssueChange(event.target.value)
            }
          />
        </AppFormField>
      </Box>

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

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