import Box from "@mui/material/Box";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import { useTheme } from "@mui/material/styles";
import type { SelectChangeEvent } from "@mui/material/Select";

import { AgencyDisplay } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/agency-display";
import {
  getInputSx,
  getSelectMenuProps,
  getSelectSx,
} from "@/features/pswg/working-group/components/add-working-group-issue-dialog/add-working-group-issue-dialog-styles";
import { EditorBox } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/editor-box";
import { RequiredLabel } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/form-label";
import { workingGroupIssueAgencies } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/working-group-issue-agencies";

type WorkingGroupIssueMainFieldsProps = {
  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;
};

export function WorkingGroupIssueMainFields({
  description,
  governmentAgency,
  issue,
  onDescriptionChange,
  onGovernmentAgencyChange,
  onIssueChange,
  onRecommendationChange,
  onWorkingGroupNameChange,
  recommendation,
  workingGroupName,
}: WorkingGroupIssueMainFieldsProps) {
  const theme = useTheme();
  const selectedGovernmentAgency = workingGroupIssueAgencies.find(
    (agency) => agency.id === governmentAgency,
  );

  return (
    <>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 2,
          mb: 1.6,
        }}
      >
        <Box>
          <RequiredLabel>Working Group Name</RequiredLabel>
          <TextField
            fullWidth
            size="small"
            value={workingGroupName}
            onChange={(event) => onWorkingGroupNameChange(event.target.value)}
            sx={getInputSx(theme)}
          />
        </Box>

        <Box>
          <RequiredLabel>Government Agency</RequiredLabel>
          <Select
            fullWidth
            size="small"
            value={governmentAgency}
            onChange={(event: SelectChangeEvent) =>
              onGovernmentAgencyChange(event.target.value)
            }
            renderValue={() => (
              <AgencyDisplay agency={selectedGovernmentAgency} />
            )}
            sx={getSelectSx(theme)}
            MenuProps={getSelectMenuProps(theme)}
          >
            {workingGroupIssueAgencies.map((agency) => (
              <MenuItem key={agency.id} value={agency.id}>
                <AgencyDisplay agency={agency} />
              </MenuItem>
            ))}
          </Select>
        </Box>
      </Box>

      <Box sx={{ mb: 1.6 }}>
        <RequiredLabel>Issue</RequiredLabel>
        <TextField
          fullWidth
          size="small"
          value={issue}
          onChange={(event) => onIssueChange(event.target.value)}
          placeholder="Write Issue title"
          sx={getInputSx(theme)}
        />
      </Box>

      <Box sx={{ mb: 1.6 }}>
        <RequiredLabel>Description of the Issue</RequiredLabel>
        <EditorBox
          placeholder="Write description ........"
          value={description}
          onChange={onDescriptionChange}
        />
      </Box>

      <Box sx={{ mb: 1.6 }}>
        <RequiredLabel>Recommendation</RequiredLabel>
        <EditorBox
          placeholder="Write Recommendation.........."
          value={recommendation}
          onChange={onRecommendationChange}
        />
      </Box>
    </>
  );
}