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 { Divider, Spin } from "antd";
import { MdCancel } from "react-icons/md";

const Form = ({status}:{status?:any}) => {
  
  const {values,setFieldValue} = useFormikContext<any>()
  console.log(values?.currentModalIndex);
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const { setObjectToEdit } = useObjectToEdit();
  const {t} = useTranslation();
  const formik = useFormikContext();
  const handleNext = ()=>{
    setFieldValue( "currentModalIndex" , values?.currentModalIndex - 2 )
    setIsOpen("");

  }
  const handleCancel = () => {
    setIsOpen("");
    setObjectToEdit({});
  };

  return (
    values?.currentModalIndex == 2 &&      

    <div className="w-100">
    <header className="modal_title">
      <span>
        {t(`models.are_you_sure_about_sale`)}{" "}
      </span>
      <MdCancel onClick={handleCancel} />
    </header>
    <Divider />
      <div className="sales_info_modal">
        <div className="info">
          <img src="/Image/faker_user.png" alt="" />
          <span>
            <h5>أنس محمد ياسر القلعجي</h5>
            <h5>الصف: <p> بكالوريا / علمي</p></h5>
          </span>
        </div>
        <ValidationField
          placeholder="choose"
          label="package"
          name="package"
          type="Select"
          option={[]}
        />
      </div>
      {/* {values?.currentModalIndex} */}
      <div className="buttons">
        <div className="back_button pointer" onClick={handleCancel}>
          {t("practical.cancel")}
        </div>
        <button
          className="add_button"
          disabled={status === QueryStatusEnum.LOADING}
          onClick={handleNext}
          >
          {t(`practical.yes`)}
          {status === QueryStatusEnum.LOADING && (
            <span className="Spinier_Div">
              <Spin />
            </span>
          )}
        </button>
      </div>  
    </div>
  );
};

export default Form;