import React, { useEffect } from "react";
import { useModalTabsState } from "../../../../../zustand/ModalTabsState";
import { useModalState } from "../../../../../zustand/Modal";
import { useFormikContext } from "formik";
import { toast } from "react-toastify";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";

interface TabsSubmiteProps {
  steps: number;
  isLoading: boolean;
}

const TabsSubmite: React.FC<TabsSubmiteProps> = ({ steps, isLoading }) => {
  const { values, isValid, submitForm } = useFormikContext<any>();

  const { ActiveTab, setActiveTab } = useModalTabsState((state) => state);
  const IsSubmite = ActiveTab + 1 !== steps;
  const {
    first_name,
    last_name,
    username,
    password,
    nationality,
    religion,
    birthday,
    birth_place,
    sex,
  } = values;

  const {
    father_name,
    father_job,
    father_phone_number,
    mother_name,
    mother_job,
    mother_phone_number,
  } = values;

  const { address, attachment1 } = values;

  const is_1_valued =
    first_name &&
    username &&
    last_name &&
    password &&
    nationality &&
    religion &&
    birthday &&
    birth_place &&
    sex;
  const is_2_valued =
    father_name &&
    father_job &&
    father_phone_number &&
    mother_name &&
    mother_job &&
    mother_phone_number;
  const is_3_valued = address;
  const is_4_valued = attachment1;

  const [t] = useTranslation();
  function handelNext() {
    // console.log("submited");
    // console.log(isValid,"isValid");

    if (!is_1_valued && Number(ActiveTab) === 0) {
      toast.error(t("validation.pleas_fill_all_label"));
      return;
    }
    if (!is_2_valued && Number(ActiveTab) === 1) {
      toast.error(t("validation.pleas_fill_all_label"));
      return;
    }
    if (!is_3_valued && Number(ActiveTab) === 2) {
      toast.error(t("validation.pleas_fill_all_label"));
      return;
    }
    if (!is_4_valued && Number(ActiveTab) === 3) {
      toast.error(t("validation.pleas_fill_all_label"));
      return;
    }

    if (Number(ActiveTab) >= steps) {
      return;
    }
    setActiveTab(Number(ActiveTab) + 1);
  }

  function handelPre() {
    setActiveTab(Number(ActiveTab) - 1);
  }

  const handleSubmit = () => {
    if (isValid) {
      submitForm();
    } else {
      submitForm();
      // console.log('Validation errors:', formik.errors);
      // setActiveTab(4)
      toast.error(t("validation.pleas_fill_all_label"));
    }
  };
  // console.log(ActiveTab,"ActiveTab");

  if (ActiveTab === steps) {
    return <></>;
  }
  return (
    <div className="SubmitButton">
      <div onClick={handelPre}>
        {ActiveTab > 0 ? "رجوع للخطوة السابقة" : ""}
      </div>
      <span
        onClick={isLoading ? undefined : IsSubmite ? handelNext : handleSubmit}
        {...(!IsSubmite && !isLoading ? { type: "submit" } : {})}
      >
        {isLoading
          ? "جار الاضافة ...."
          : IsSubmite
            ? "الخطوة التالية"
            : "إضافة الطالب"}
      </span>
    </div>
  );
};

export default TabsSubmite;
