import {
  Box,
  Button,
  Typography,
  Stack,
  Divider,
  TextField,
} from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
import { SPACING } from "../../../../data/spacing";
import { Grid } from "../../../../components/grid/Grid";
import { format } from "date-fns-jalali";

export const SlaughterEnterInformationModal = ({ handleSubmit, item }) => {
  const validationSchema = Yup.object({
    message: Yup.string().required("پیام الزامی است"),
  });

  const formik = useFormik({
    initialValues: {
      message: "",
    },
    validationSchema,
    onSubmit: (values) => {
      handleSubmit(values);
    },
  });

  return (
    <Grid container gap={SPACING.SMALL} direction="column">
      <Box
        component="form"
        onSubmit={formik.handleSubmit}
        sx={{ p: 2, minWidth: 300 }}
      >
        <Grid container spacing={2} sx={{ mb: 3 }}>
          <Grid item xs={6}>
            <Stack spacing={1}>
              <Stack direction="row" spacing={2}>
                <Typography variant="body2">کدبار:</Typography>
                <Typography variant="body2">{item?.barCode || "-"}</Typography>
              </Stack>

              <Stack direction="row" spacing={1}>
                <Typography variant="body2">تاریخ کشتار:</Typography>
                <Typography variant="body2">
                  {item?.poultryRequest.sendDate
                    ? format(
                        new Date(item?.poultryRequest.sendDate),
                        "yyyy/MM/dd"
                      )
                    : "-"}
                </Typography>
              </Stack>

              <Stack direction="row" spacing={1}>
                <Typography variant="body2">خریدار:</Typography>
                <Typography variant="body2">{`${item.killhouseUser?.name}(${item.killhouseUser?.killHouseOperator?.user?.mobile})`}</Typography>
              </Stack>
            </Stack>
          </Grid>

          <Grid item xs={6}>
            <Stack spacing={1}>
              <Stack direction="row" spacing={1}>
                <Typography variant="body2">مرغدار:</Typography>
                <Typography variant="body2">{`${item.poultryRequest?.poultry?.unitName}`}</Typography>
              </Stack>
            </Stack>
            <Stack direction="row" spacing={2}>
              <Typography variant="body2"> کد سفارش:</Typography>
              <Typography variant="body2">
                {item?.poultryRequest.orderCode}
              </Typography>
            </Stack>

            <Stack direction="row" spacing={2}>
              <Typography variant="body2">تعداد اولیه:</Typography>
              <Typography variant="body2">
                {item.quantity?.toLocaleString()} (قطعه)
              </Typography>
            </Stack>
            <Stack direction="row" spacing={2}>
              <Typography variant="body2">وزن :</Typography>
              <Typography variant="body2">
                {item?.weightInfo?.weight?.toLocaleString()} (کیلوگرم)
              </Typography>
            </Stack>
          </Grid>
        </Grid>

        <Divider sx={{ mt: 1, mb: 2 }} />

        <TextField
          name="message"
          label="پیام (اجباری)"
          multiline
          rows={4}
          value={formik.values.message}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.message && Boolean(formik.errors.message)}
          helperText={formik.touched.message && formik.errors.message}
          variant="outlined"
          fullWidth
          sx={{ mb: 2 }}
        />

        <Button
          fullWidth
          variant="contained"
          color="primary"
          type="submit"
          disabled={!formik.isValid || formik.isSubmitting}
        >
          ثبت
        </Button>
      </Box>
    </Grid>
  );
};
