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/ministry/dashboard/components/add-dashboard-issue-dialog/agency-display";
import {
  getInputSx,
  getSelectMenuProps,
  getSelectSx,
} from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/add-dashboard-issue-dialog-styles";
import { EditorBox } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/editor-box";
import { RequiredLabel } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/form-label";
import { dashboardIssueAgencies } from "@/features/ministry/dashboard/components/add-dashboard-issue-dialog/dashboard-issue-agencies";

type DashboardIssueMainFieldsProps = {
  dashboardName: string;
  description: string;
  governmentAgency: string;
  issue: string;
  onDashboardNameChange: (value: string) => void;
  onDescriptionChange: (value: string) => void;
  onGovernmentAgencyChange: (value: string) => void;
  onIssueChange: (value: string) => void;
  onRecommendationChange: (value: string) => void;
  recommendation: string;
};

export function DashboardIssueMainFields({
  dashboardName,
  description,
  governmentAgency,
  issue,
  onDashboardNameChange,
  onDescriptionChange,
  onGovernmentAgencyChange,
  onIssueChange,
  onRecommendationChange,
  recommendation,
}: DashboardIssueMainFieldsProps) {
  const theme = useTheme();

  const selectedGovernmentAgency = dashboardIssueAgencies.find(
    (agency) => agency.id === governmentAgency
  );

  return (
    <>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 2,
          mb: 1.6,
        }}
      >
        <Box>
          <RequiredLabel>Dashboard Name</RequiredLabel>
          <TextField
            fullWidth
            size="small"
            value={dashboardName}
            onChange={(event) => onDashboardNameChange(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)}
          >
            {dashboardIssueAgencies.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>
    </>
  );
}