import { Box, Button, Grid } from "@mui/material";
import { Formik } from "formik";
import React, { useState } from "react";
import toast from "react-hot-toast";
import * as Yup from "yup";
import { MySaleManageFields } from "../../data/ProductManageFields";
import useMySaleStore from "../../services/store/sale/useMySaleStore";
import SelectFieldCommon from "../common/Form/SelectFieldCommon";
import TextFieldInput from "../common/Form/TextFieldInput ";
import OrderItemsManage from "./OrderItemsManage";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { addMySaleManage } from "../../services/axios/saleFetchApi";
import { mySaleListQueryName } from "../../utils/helper";

// validation
const validationSchema = Yup.object({
  customerName: Yup.string().required("Customer name is required"),
  discount: Yup.string(),
  vat: Yup.string(),
  deliveryFee: Yup.string(),
  subTotal: Yup.string().required("Sub total is required"),
  orderTotal: Yup.string().required("Order total is required"),
  note: Yup.string(),
  discountType: Yup.object().nullable().required("Discount type is required"),
  vatType: Yup.object().nullable().required("Vat type is required"),
  shipZone: Yup.object().nullable().required("ship  zone is required"),
});

function SaleFormManage({ setOpen }) {
  const [storeSelectOptions, setSelectOptions] = useState({
    customerName: [],
    shipZone: [],
  });

  //Zustand
  const { items } = useMySaleStore();

  //Context
  const queryClient = useQueryClient();

  //Handle submit form
  const handleSubmitForm = (data) => {
    console.log("handleSubmitForm - data:", data);
    if (items?.length <= 0) {
      toast.error("Please add at least one order item");
    } else {
      console.log("submit form code");
      //?   add object here
      //   saleOrderAddMutation.mutate({id:...,name:...})
    }
  };

  //Add single mutation
  const saleOrderAddMutation = useMutation({
    mutationFn: addMySaleManage,
    onSuccess: (data) => {
      if (data?.success) {
        toast.success(`Order added successfully`);
        queryClient.invalidateQueries({ queryKey: [mySaleListQueryName] });
        setOpen(false);
      }
    },
  });

  return (
    <Box>
      {/* form start */}
      <Formik
        initialValues={{ status: null }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting }) =>
          handleSubmitForm(values, setSubmitting)
        }
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          setFieldValue,
        }) => {
          // console.log(" errors:", errors);
          return (
            <>
              <Box
                component="form"
                noValidate
                autoComplete="off"
                p={2}
                onSubmit={handleSubmit}
              >
                <Grid container spacing={2}>
                  {MySaleManageFields.map((field, i) => {
                    if (field?.type === "select") {
                      return (
                        <Grid item md={4} sm={6} xs={12} key={field.id}>
                          <SelectFieldCommon
                            name={field?.name}
                            options={
                              field?.options
                                ? field?.options
                                : storeSelectOptions[field?.name]
                            }
                            label={field?.label}
                            isRequired={field?.required}
                          />
                        </Grid>
                      );
                    }
                    return (
                      <Grid item md={4} sm={6} xs={12} key={field.id}>
                        <TextFieldInput
                          name={field?.name}
                          label={field?.label}
                          isRequired={field?.required}
                          multiline={field?.isMultiLine ? true : false}
                          minRows={field?.minRow}
                          maxRows={field?.maxRow}
                        />
                      </Grid>
                    );
                  })}
                </Grid>
                <Box
                  display={"flex"}
                  justifyContent={"end"}
                  gap={1}
                  sx={{
                    mt: 10,
                  }}
                >
                  <Button type="submit" variant="contained" color="success">
                    Add Order
                  </Button>
                </Box>
              </Box>
              <OrderItemsManage />
            </>
          );
        }}
      </Formik>
    </Box>
  );
}

export default SaleFormManage;