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 + 1 )
  }
  const handleCancel = () => {
    setIsOpen("");
    setObjectToEdit({});
  };

  return (
    values?.currentModalIndex == 1 &&      

    <div className="w-100">
    <header className="modal_title">
      <span>
        {t(`models.`)}{" "}
      </span>
      <MdCancel onClick={handleCancel} />
    </header>
    <Divider />

    <Row className="w-100">
      <Col>
        <ValidationField
          placeholder="phone_number"
          label="phone_number"
          name="phone_number"
        />
          <Divider className="margin_auto"/>
      </Col>
          {values?.currentModalIndex}
          <div className="buttons">
            <div className="back_button pointer" onClick={handleCancel}>
              {t("practical.cancel")}
            </div>
            <button
              className="add_button"
              disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
              onClick={handleNext}
              >
              {t(`practical.search`)}
              {status === QueryStatusEnum.LOADING && (
                <span className="Spinier_Div">
                  <Spin />
                </span>
              )}
            </button>
          </div>  
      </Row>
    </div>
  );
};

export default Form;