/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import Container from "@/components/elements/Container";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import React, { useEffect, useMemo } from "react";
import useAxios from "@/hooks/useAxios";
import { useFormik } from "formik";
import * as yup from "yup";
import { useRouter } from "next/navigation";
import AuthNextButton from "@/components/auth/AuthNextButton";
import toast from "react-hot-toast";
import { useUser } from "@/hooks/useUser";
import { useTranslation } from "react-i18next";

function CooperationType() {
  const { t } = useTranslation("common");
  const router = useRouter();
  const { request, loading } = useAxios();
  const user = useUser();

  const schema = useMemo(
    () =>
      yup.object().shape({
        selectedButton: yup.boolean().required(t("settings.edit.cooperationType.required")),
      }),
    [t]
  );

  const formik = useFormik({
    initialValues: { selectedButton: null as boolean | null },
    validationSchema: schema,
    onSubmit: async (values, { setSubmitting }) => {
      try {
        await request("PATCH", "/verify/cooperation_type", {
          cooperation_abroad: values.selectedButton,
          cooperation_type: "all",
        });
        router.push("/settings/edit");
      } catch (err: any) {
        toast.error(err?.message || t("settings.edit.unknownError"));
      } finally {
        setSubmitting(false);
      }
    },
  });

  useEffect(() => {
    formik.setValues({ selectedButton: user?.cooperation_abroad ?? null });
  }, [user?.cooperation_abroad]);

  return (
    <LocalePageShell>
      <Container>
        <div className="p-4 flex flex-col items-center h-screen justify-center">
          <span className="text-xl font-bold text-foreground">
            {t("settings.edit.nav.cooperationType")}
          </span>
          <p className="my-10 text-sm font-bold">
            {t("settings.edit.cooperationType.question")}
          </p>
          <form onSubmit={formik.handleSubmit} className="w-full max-w-sm flex flex-col items-center">
            <div className="flex w-full gap-2">
              <AuthNextButton
                type="button"
                onClick={() => formik.setFieldValue("selectedButton", true)}
                className={`mt-5 text-xs w-full max-w-[250px] flex items-center justify-center flex-row-reverse gap-2 px-1 ${
                  formik.values.selectedButton === true ? "btn-modern--selected text-white" : ""
                }`}
              >
                {t("settings.edit.cooperationType.yes")}
              </AuthNextButton>
              <AuthNextButton
                type="button"
                onClick={() => formik.setFieldValue("selectedButton", false)}
                className={`mt-5 text-xs w-full max-w-[250px] flex items-center justify-center flex-row-reverse gap-2 px-1 ${
                  formik.values.selectedButton === false ? "btn-modern--selected text-white" : ""
                }`}
              >
                {t("settings.edit.cooperationType.no")}
              </AuthNextButton>
            </div>
            {formik.errors.selectedButton && formik.touched.selectedButton && (
              <div className="text-red-500 mt-2 text-sm">{formik.errors.selectedButton}</div>
            )}
            <AuthNextButton type="submit" className="mt-20" loading={loading} disabled={loading}>
              {t("settings.edit.save")}
            </AuthNextButton>
          </form>
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default CooperationType;
