import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
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";
import { useEffect, useState } from "react";
import { useGetStudentByPhone } from "../../../../api/sales";
import { ModalBodyProps } from "../../../../types/Sales";
import { onEnterDown } from "../../../../utils/onKeyDown";

const Form = ({ handleCloseModel = () => {} }: ModalBodyProps) => {
  const [triggerApi, setTriggerApi] = useState(false);
  const { setObjectToEdit } = useObjectToEdit();
  const { t } = useTranslation();

  const formik = useFormikContext();
  const { values, setFieldValue } = useFormikContext<any>();
  const phoneNumber: number = values?.phone_number;

  const { data, status, isSuccess,isError } = useGetStudentByPhone(
    {
      phone_number: phoneNumber,
    },
    {
      enabled: triggerApi,
    },
  );

  const handleNext = () => {
    if (values?.phone_number && phoneNumber.toString().length === 10) {
      setTriggerApi(true);
      setObjectToEdit({ data });
    }
  };

  useEffect(() => {
    if (isSuccess && data?.data) {
      setTriggerApi(false);
      setObjectToEdit({ data });
      console.log(isSuccess)
      setFieldValue("currentModalIndex", values?.currentModalIndex + 1);
    }
  }, [isSuccess,isError,status]);

  const isDisabled = status === QueryStatusEnum.LOADING ||
                !formik.dirty ||
                !values?.phone_number
            
  const handleKeyDown = (e:any) =>{
    onEnterDown(e,handleNext,isDisabled)
  }
  return (
    values?.currentModalIndex == 0 && (
      <div className="w-100">
        <header className="modal_title">
          <span>{t(`models.add_sales`)} </span>
          <MdCancel onClick={handleCloseModel} />
        </header>

        <Divider />

        <Row className="w-100">
          <Col>
            <ValidationField
              placeholder="phone_number"
              label="phone_number"
              name="phone_number"
              onKeyDown={handleKeyDown}
            />
            <Divider className="margin_auto" />
          </Col>

          <div className="buttons">
            <Button className="back_button pointer" onClick={handleCloseModel}>
              {t("practical.cancel")}
            </Button>
            <Button
              className="add_button"
              disabled={isDisabled}
              onClick={handleNext} // eee
              
            >
              {t(`practical.sale`)}
              {status === QueryStatusEnum.LOADING && (
                <span className="Spinier_Div">
                  <Spin />
                </span>
              )}
            </Button>
          </div>
        </Row>
      </div>
    )
  );
};

export default Form;
