import { Card, Grid } from "@mui/material";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { SPACING } from "../../../../data/spacing";
import { useFormik } from "formik";
import moment from "moment";
import { Yup } from "../../../../lib/yup/yup";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { driverGetCars } from "../../services/driver-get-cars";

export const DriverCars = () => {
  const [dataTable, setDataTable] = useState([]);
  const { driverCars } = useSelector((state) => state.driverSlice);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(driverGetCars());
  }, []);

  useEffect(() => {
    const d = driverCars.map((item, i) => {
      return [
        i + 1,
        item.name,
        item.typeCar,
        item.pelak,
        item.capocity,
        item.healthCode,
        item.typeWeight,
      ];
    });

    setDataTable(d);
  }, [driverCars]);

  const [tableDataCol] = useState([
    "ردیف",
    "نام",
    "نوع خودرو",
    "پلاک",
    "ظرفیت",
    "کد بهداشتی",
    "وزن",
  ]);

  const formik = useFormik({
    initialValues: {
      capacity: "",
      recieveTime: "",
      recieveDate: moment(Date()).format("YYYY-MM-DD hh:mm:ss"),
    },
    validationSchema: Yup.object({
      capacity: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      recieveTime: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا وزن را وارد کنید!"),
    }),
  });

  useEffect(() => {
    formik.validateForm();
  }, []);

  return (
    <Grid
      container
      alignItems="center"
      justifyContent="space-between"
      gap={SPACING.SMALL}
      mt={SPACING.MEDIUM}
    >
      <Card sx={{ width: "100%" }}>
        <AdvancedTable
          name="ماشین های شما"
          columns={tableDataCol}
          data={dataTable}
        />
      </Card>
    </Grid>
  );
};
