import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
import { useFormikContext } from "formik";
import { useModalState } from "../../../../zustand/Modal";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import { Button, Divider, Spin } from "antd";
import { MdCancel } from "react-icons/md";

const Form = () => {
  
  const {values,setFieldValue} = useFormikContext<any>()
  console.log(values?.currentModalIndex);
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { objectToEdit,setObjectToEdit } = useObjectToEdit();
  const {t} = useTranslation();
  const formik = useFormikContext();
  const handleNext = ()=>{
    setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
  }
  const handleCancel = () => {
    setIsOpen("");
    setObjectToEdit({});
  };

console.log(objectToEdit);
  const student_info = objectToEdit?.data?.data
  const PackagesInfo = student_info?.packages.map((info:any) => ({
    id: info?.id,
    name: info.name + " " + `( ${info?.original_price} )`
  }));
  

  return (
    values?.currentModalIndex == 1 &&      

    <div className="w-100">
    <header className="modal_title">
      <span>
        {t(`models.add_sales`)}{" "}
      </span>
      <MdCancel onClick={handleCancel} />
    </header>
    <Divider />
      <div className="sales_info_modal">
        <div className="info">
          <img src="/Image/faker_user.png" alt="" />
          <span>
            <h5>{student_info?.first_name +" " + student_info?.last_name}</h5>
            <h5>{t("models.course")}: <p> {student_info?.grade_name}</p></h5>
          </span>
        </div>
        <ValidationField
          placeholder="choose"
          label="package"
          name="package_id"
          type="Select"
          option={PackagesInfo}
        />
      </div>
      {/* {values?.currentModalIndex} */}
      <div className="buttons">
        <Button className="back_button pointer" onClick={handleCancel}>
          {t("practical.cancel")}
        </Button>
        <Button
          className="add_button"
          disabled={status === QueryStatusEnum.LOADING || !formik.dirty || !values?.package_id}
          onClick={handleNext}
          >
          {t(`practical.sale`)}
          {status === QueryStatusEnum.LOADING && (
            <span className="Spinier_Div">
              <Spin />
            </span>
          )}
        </Button>
      </div>  
    </div>
  );
};

export default Form;