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({
  note: Yup.string(),
});

function OrderCancelManage({ 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}>
                  <Grid item xs={12}>
                    <TextFieldInput
                      name={"note"}
                      label={"Reason"}
                      isRequired={false}
                      multiline
                      minRows={3}
                      maxRows={12}
                      formVariant="outlined"
                    />
                  </Grid>
                </Grid>
                <Box
                  sx={{
                    textAlign: "end",
                    mt: 10,
                  }}
                >
                  <Button type="submit" variant="contained" color="error">
                    Cancel Order
                  </Button>
                </Box>
              </Box>
            </>
          );
        }}
      </Formik>
    </Box>
  );
}

export default OrderCancelManage;