import React from "react";
import { Box, FormControlLabel, IconButton, Paper, Switch, TextField, Typography } from "@mui/material";
import { DeleteOutlineOutlined } from "@mui/icons-material";

export interface WorkExperienceFormItem {
  id?: string;
  hasNoExperience: boolean;
  companyName: string;
  lastPosition: string;
  startYear: string;
  endYear: string;
  leavingReason: string;
  description: string;
}

interface Props {
  value: WorkExperienceFormItem;
  index: number;
  onChange: (next: WorkExperienceFormItem) => void;
  onRemove: () => void;
  disableRemove: boolean;
}

export function WorkExperienceItemForm({ value, index, onChange, onRemove, disableRemove }: Props) {
  const setField = (key: keyof WorkExperienceFormItem) => (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange({ ...value, [key]: e.target.value });
  };

  const setHasNoExperience = (checked: boolean) => {
    if (checked) {
      // پاکسازی کامل سایر فیلدها در صورت انتخاب "فاقد سابقه"
      onChange({
        hasNoExperience: true,
        companyName: "",
        lastPosition: "",
        startYear: "",
        endYear: "",
        leavingReason: "",
        description: "",
      });
    } else {
      onChange({ ...value, hasNoExperience: false });
    }
  };

  return (
    <Paper elevation={0} >
      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }}>
        <IconButton onClick={onRemove} disabled={disableRemove} size="small"><DeleteOutlineOutlined /></IconButton>
      </Box>

      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" }, gap: 2 }}>
        <FormControlLabel
          sx={{ gridColumn: "1 / -1" }}
          control={<Switch checked={value.hasNoExperience} onChange={(e) => setHasNoExperience(e.target.checked)} />}
          label="فاقد سابقه کاری هستم"
        />

        <TextField label="نام شرکت" value={value.companyName} onChange={setField("companyName")} fullWidth disabled={value.hasNoExperience} />
        <TextField label="آخرین سمت" value={value.lastPosition} onChange={setField("lastPosition")} fullWidth disabled={value.hasNoExperience} />
        <TextField label="سال شروع" value={value.startYear} onChange={(e) => onChange({ ...value, startYear: e.target.value.replace(/[^\d]/g, "") })} fullWidth disabled={value.hasNoExperience} inputMode="numeric" />
        <TextField label="سال پایان" value={value.endYear} onChange={(e) => onChange({ ...value, endYear: e.target.value.replace(/[^\d]/g, "") })} fullWidth disabled={value.hasNoExperience} inputMode="numeric" />
        <TextField label="علت ترک کار" value={value.leavingReason} onChange={setField("leavingReason")} fullWidth disabled={value.hasNoExperience} sx={{ gridColumn: { md: "1 / -1" } }} />
        <TextField label="توضیحات" value={value.description} onChange={setField("description")} fullWidth disabled={value.hasNoExperience} multiline minRows={3} sx={{ gridColumn: { md: "1 / -1" } }} />
      </Box>
    </Paper>
  );
}