"use client";

import DatePickerCM from "@/app/_lib/components/date-picker";
import SelectCm from "@/app/_lib/components/selectCm";
import {
  FIELD_OF_STUDY_OPTIONS,
  GENDER,
  LEVEL_OPTIONS_1,
} from "@/app/_lib/helper/form-const";
import { PROVINCES_DATA } from "@/app/_lib/helper/provinces";
import { CITIES_DATA } from "@/app/_lib/helper/provinces_cities";
import { convertNum } from "@/app/_lib/utils/convert-num";
import dataFetcher from "@/app/_lib/utils/fetcher";
import { validationHandler } from "@/app/_lib/utils/validation-handler";
import { stdFormSchema } from "@/app/_lib/validation";
import { useRef, useState } from "react";
import { LuLoader2 } from "react-icons/lu";
import { toast } from "react-toastify";
import { API_H1_V2_BASE_URL, API_H2_V2_BASE_URL } from "@/app/_lib/helper/env";
import Link from "next/link";

const initialValues = {
  first_name: null,
  last_name: null,
  level: null,
  field_of_study: null,
  national_code: null,
  birth_date: null,
  prev_school: null,
  last_avg_score: null,
  phone_number: null,
  father_phone_number: null,
  mother_phone_number: null,
  province: null,
  city: null,
  father_job: null,
  mother_job: null,
  gender: null,
};
const initialRef = {
  first_name: undefined, // نام
  last_name: undefined, // نام خانوادگی
  level: undefined, // پایه
  field_of_study: "تجربی", // رشته
  national_code: undefined, // کد ملی
  birth_date: undefined, // تولد
  prev_school: undefined, // مدرسه قبلی
  last_avg_score: undefined, // اخرین معدل پایانی
  phone_number: undefined, // تماس
  father_phone_number: undefined, //  تماس پدر
  mother_phone_number: undefined, // تماس مادر
  province: "02", // استان
  city: "10", // شهر
  father_job: undefined, // شغل
  mother_job: undefined, // شغل
  from_academy: true,
  gender: "دختر",
};

export default function StudentRegistrationForm() {
  const inputRefs = useRef(initialRef);
  const formRef = useRef();
  const switchRef = useRef({
    box: null,
    text: "دانش آموز مدرسه",
  });
  const [errors, setErrors] = useState(initialValues);
  const [loading, setLoading] = useState(false);
  const [citiesList, setSitiesList] = useState(
    CITIES_DATA.filter((city) => city.province_id === "02")
  );
  const [selectedValues, setSelectedValues] = useState({
    field_of_study: "تجربی",
    level: "",
    province: "02",
    city: "10",
    gender: "دختر",
  });

  const changeValueHandler = (val, id) => {
    inputRefs.current[id] = val.trim() === "" ? undefined : val.trim();
  };

  const handleSubmitForm = async (values) => {
    await setLoading(true);
    const { count, err } = await validationHandler(stdFormSchema, values);
    if (count) {
      setLoading(false);
      let tmpErr = {};

      return setErrors({
        initialValues,
        ...err,
        ...tmpErr,
      });
    }
    const res = await dataFetcher({
      base_url: API_H1_V2_BASE_URL,
      url: "student/register_request",
      method: "POST",
      body: JSON.stringify({ ...values, from_academy: !values.from_academy }),
    });
    if (res.message === "ok") {
      formRef.current.reset();
      inputRefs.current = {
        first_name: undefined,
        last_name: undefined,
        level: undefined,
        field_of_study: "تجربی",
        national_code: undefined,
        birth_date: undefined,
        prev_school: undefined,
        last_avg_score: undefined,
        phone_number: undefined,
        father_phone_number: undefined,
        mother_phone_number: undefined,
        province: "02",
        city: undefined,
        father_job: undefined,
        mother_job: undefined,
        from_academy: true,
        gender: "دختر",
      };
      setErrors(initialValues);
      setLoading(false);
      setSelectedValues({
        field_of_study: "تجربی",
        level: "",
        province: "02",
        // city: "10",
      });
      toast.success(
        <div>
          <span>درخواست پیش ثبت نام شما با موفقیت انجام شد</span>
          <br />
          <span>کد پیگیری شما: {res.data}</span>
          <br />
          <span>-مجموعه آموزشی شریف</span>
        </div>,
        { autoClose: false, position: "top-center" }
      );
    } else {
      if (res.code === 986585) {
        setErrors({
          initialValues,
          national_code: "کد ملی نباید تکراری باشد",
        });
      }
      setLoading(false);
    }
  };

  return (
    <section className="form-input-container form-input-container-small mt-12">
      <div className="h-[80px] max-[620px]:pr-6 max-[620px]:pl-6">
        <p className="m-0 text-red-600">
          توجه : ابتدا مقطع مورد نظر را انتخاب، سپس اطلاعات را کامل کنید.
        </p>
      </div>
      <div className="flex">
        <Link href={"/student-registration"}>
          <div className="relative h-12 -mt-5 py-3 px-2 duration-300 cursor-pointer rounded-full flex justify-between items-center border-primary-main border-2 bg-primary-main w-32 mb-3 max-[620px]:!mr-[20px]">
            <div className="z-10 px-2 py-1 right-[8px] whitespace-nowrap text-white rounded-full text-center w-full">
              متوسطه اول
            </div>
          </div>
        </Link>
        <Link href={"/student-registration-2"}>
          <div className="relative h-12 -mt-5 py-3 px-2 duration-300 cursor-pointer rounded-full flex justify-between items-center bg-white border-primary-main border-2 mr-4 w-32 mb-3 max-[620px]:!mr-[20px]">
            <div className="z-10 px-2 py-1 right-[8px] whitespace-nowrap text-primary-main rounded-full text-center w-full">
              متوسطه دوم
            </div>
          </div>
        </Link>
      </div>
      <form
        ref={formRef}
        action={async () => {
          await setLoading(true);
          await handleSubmitForm(inputRefs.current);
        }}
        className=" grid grid-cols-4 z-30 bg-white gap-5 max-[1125px]:grid-cols-3 max-[1075px]:grid-cols-2 max-[620px]:!px-[16px] max-[620px]:gap-3"
      >
        <div className={errors.first_name ? "has-err" : ""}>
          <input
            id="first_name"
            onChange={(event) =>
              changeValueHandler(event.target.value, event.target.id)
            }
            name="first_name"
            placeholder="نام "
          />
          <span className="inp-err">{errors.first_name}</span>
        </div>
        <div className={errors.last_name ? "has-err" : ""}>
          <input
            id="last_name"
            onChange={(event) =>
              changeValueHandler(event.target.value, event.target.id)
            }
            name="last_name"
            placeholder="نام خانوادگی"
          />
          <span className="inp-err">{errors.last_name}</span>
        </div>
        <div className={errors.gender ? "has-err" : ""}>
          <SelectCm
            title={"جنسیت"}
            selectedValue={selectedValues.gender}
            onChange={(val) => {
              setSelectedValues({ ...selectedValues, gender: val });
              inputRefs.current.gender = val;
            }}
            options={GENDER}
          />
          <span className="inp-err">{errors.gender}</span>
        </div>
        <div className={errors.level ? "has-err" : ""}>
          <SelectCm
            title={"پایه تحصیلی"}
            selectedValue={selectedValues.level}
            onChange={(val) => {
              setSelectedValues({ ...selectedValues, level: val });
              inputRefs.current.level = val;
            }}
            options={LEVEL_OPTIONS_1}
          />
          <span className="inp-err">{errors.level}</span>
        </div>
        <div className={"" + (errors.national_code ? "has-err" : "")}>
          <input
            id="national_code"
            onChange={(event) =>
              changeValueHandler(
                convertNum(event.target.value),
                event.target.id
              )
            }
            name="national_code"
            placeholder="کد ملی (10 رقم)"
          />
          <span className="inp-err">{errors.national_code}</span>
        </div>
        <div className={errors.birth_date ? "has-err" : ""}>
          <DatePickerCM
            title="تاریخ تولد"
            onChange={(dateObj) =>
              (inputRefs.current.birth_date = `${dateObj.unix}`)
            }
          />
          <span className="inp-err">{errors.birth_date}</span>
        </div>
        <div className={errors.prev_school ? "has-err" : ""}>
          <input
            id="prev_school"
            onChange={(event) =>
              changeValueHandler(event.target.value, event.target.id)
            }
            name="prev_school"
            placeholder="نام مدرسه قبلی "
          />
          <span className="inp-err">{errors.prev_school}</span>
        </div>
        <div className={errors.last_avg_score ? "has-err" : ""}>
          <input
            id="last_avg_score"
            onChange={(event) =>
              changeValueHandler(
                convertNum(event.target.value),
                event.target.id
              )
            }
            name="last_avg_score"
            placeholder="آخرین معدل پایانی "
          />
          <span className="inp-err">{errors.last_avg_score}</span>
        </div>
        <div className={errors.province ? "has-err" : ""}>
          <SelectCm
            title={"استان"}
            selectedValue={selectedValues.province}
            onChange={(val) => {
              setSitiesList(
                CITIES_DATA.filter((city) => city.province_id === val)
              );
              setSelectedValues({
                ...selectedValues,
                province: val,
                city:
                  val !== selectedValues.province ? "" : selectedValues.city,
              });
              inputRefs.current.province = val;
            }}
            options={PROVINCES_DATA}
          />
          <span className="inp-err">{errors.province}</span>
        </div>
        <div className={errors.city ? "has-err" : ""}>
          <SelectCm
            title={"شهر"}
            selectedValue={selectedValues.city}
            onChange={(val) => {
              setSelectedValues({ ...selectedValues, city: val });
              inputRefs.current.city = val;
            }}
            options={citiesList}
          />
          <span className="inp-err">{errors.city}</span>
        </div>
        <div className={errors.phone_number ? "has-err" : ""}>
          <input
            id="phone_number"
            onChange={(event) =>
              changeValueHandler(
                convertNum(event.target.value),
                event.target.id
              )
            }
            name="phone_number"
            placeholder="شماره تماس "
          />
          <span className="inp-err">{errors.phone_number}</span>
        </div>
        <div className={errors.father_phone_number ? "has-err" : ""}>
          <input
            id="father_phone_number"
            onChange={(event) =>
              changeValueHandler(
                convertNum(event.target.value),
                event.target.id
              )
            }
            name="father_phone_number"
            placeholder="شماره تماس پدر"
          />
          <span className="inp-err">{errors.father_phone_number}</span>
        </div>
        <div className={errors.mother_phone_number ? "has-err" : ""}>
          <input
            id="mother_phone_number"
            onChange={(event) =>
              changeValueHandler(
                convertNum(event.target.value),
                event.target.id
              )
            }
            name="mother_phone_number"
            placeholder="شماره تماس مادر"
          />
          <span className="inp-err">{errors.mother_phone_number}</span>
        </div>
        <div className={errors.father_job ? "has-err" : ""}>
          <input
            id="father_job"
            onChange={(event) =>
              changeValueHandler(
                convertNum(event.target.value),
                event.target.id
              )
            }
            name="father_job"
            placeholder="شغل پدر"
          />
          <span className="inp-err">{errors.father_job}</span>
        </div>
        <div className={errors.mother_job ? "has-err" : ""}>
          <input
            id="mother_job"
            onChange={(event) =>
              changeValueHandler(event.target.value, event.target.id)
            }
            name="mother_job"
            placeholder="شغل مادر"
          />
          <span className="inp-err">{errors.mother_job}</span>
        </div>
        <div className="flex justify-end col-span-full  mt-5">
          <button
            className={
              " text-white px-6 py-2 bg-primary-main border-primary-main rounded-md border-[1px] flex justify-center items-center gap-2"
            }
            type="submit"
            disabled={loading}
          >
            ارسال فرم
            {loading ? (
              <LuLoader2 fontSize={24} className="animate-spin" />
            ) : (
              ""
            )}
          </button>
        </div>
      </form>
    </section>
  );
}