"use client";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { close, error, loading, registerConfirm } from "@/config/swal";
import { useRouter } from "@/i18n/routing";
import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
import { verifyOTP } from "@/service/landing/landing";
import { yupResolver } from "@hookform/resolvers/yup";
import { useParams, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import * as Yup from "yup";


type Inputs = {
  example: string;
  exampleRequired: string;
};

const page = () => {
  const params = useParams();
  const [stepOneActive] = useState(true);
  const [stepTwoActive, setStepTwoActive] = useState(false);
  const [stepThreeActive, setStepThreeActive] = useState(false);
  const [typePass, setTypePass] = useState("password");
  const [typePassConf, setTypePassConf] = useState("password");
  const searchParams = useSearchParams();
  const [formProfile, setFormProfile] = useState(false);
  const [journalistCertificate, setJournalistCertificate] = useState();
  const [personilNRP, setPersonilNRP] = useState();
  const [journalistData, setJournalistData] = useState<any>();
  const [personilData, setPersonilData] = useState<any>();
  const [userIdentity] = useState();
  const [userIdentityValidate, setUserIdentityValidate] = useState("");
  const [email, setEmail] = useState();
  const [emailValidate, setEmailValidate] = useState("");
  const [otpValidate, setOtpValidate] = useState("");
  const [password, setPassword] = useState("");
  const [passwordConf, setPasswordConf] = useState("");
  const [city, setCity] = useState([]);
  const [isValidPassword, setIsValidPassword] = useState(false);
  const MySwal = withReactContent(Swal);
  const [isCustomActive, setIsCustomActive] = useState(false);
  const [institusi, setInstitusi] = useState();
  const [customInstituteName, setCustomInstituteName] = useState("");
  const [institusiAddress, setInstitusiAddress] = useState<any>();
  const [institution, setInstitution] = useState<any>([]);
  const [province, setProvince] = useState<any>([]);
  const router = useRouter();
  const category = searchParams?.get("category");
  const [districts, setDistricts] = useState([]);

  const [otp1, setOtp1] = useState();
  const [otp2, setOtp2] = useState();
  const [otp3, setOtp3] = useState();
  const [otp4, setOtp4] = useState();
  const [otp5, setOtp5] = useState();
  const [otp6, setOtp6] = useState();

  const nMinuteSeconds = 60;
  const nSecondInMiliseconds = 1000;
  const [, setRefreshTimer] = useState(false);

  const validationSchema = Yup.object().shape({
    firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
    username: Yup.string().required("Username tidak boleh kosong"),
    phoneNumber: Yup.string().required("Nomor Telepon tidak boleh kosong"),
    address: Yup.string().required("Alamat tidak boleh kosong"),
    email: Yup.string().required("Email tidak boleh kosong"),
    provinsi: Yup.string().required("Provinsi tidak boleh kosong"),
    kota: Yup.string().required("Kota tidak boleh kosong"),
    kecamatan: Yup.string().required("Kecamatan tidak boleh kosong"),
    password: Yup.string().required("Kata Sandi tidak boleh kosong"),
    passwordConf: Yup.string().required(
      "Konfirmasi Kata Sandi tidak boleh kosong",
    ),
  });

  const formOptions = {
    resolver: yupResolver(validationSchema),
  };

  const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);

  const convertMinutesToMiliseconds = (minute: any) =>
    minute * nMinuteSeconds * nSecondInMiliseconds;

  const convertMilisecondsToHour = (miliseconds: any) =>
    new Date(miliseconds).toISOString().slice(17, -5);

  let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
  let interval;

  const showPass = () => {
    setTypePass("text");
  };

  const hidePass = () => {
    setTypePass("password");
  };

  const showPassConf = () => {
    setTypePassConf("text");
  };

  const hidePassConf = () => {
    setTypePassConf("password");
  };

  const setValUsername = (e: any) => {
    const uname = e.replaceAll(/[^\w.-]/g, "");
    setValue("username", uname.toLowerCase());
  };

  const setValPassword = (e: any) => {
    setValue("password", e);
    setPassword(e);
  };

  const setValPasswordConf = (e: any) => {
    setPasswordConf(e);
  };

  

  async function save(data: any) {
    // loading();
    let institutionId = 1;

    if (Number(category) == 6) {
      const dataInstitution =
        isCustomActive == true
          ? {
            name: customInstituteName,
            address: institusiAddress,
            categoryRoleId: Number(category),
          }
          : {
            id: institusi,
            address: institusiAddress,
          };

      console.log(dataInstitution);

      const resInstitution = await saveInstitutes(dataInstitution);

      institutionId = resInstitution?.data?.data?.id;
      if (resInstitution?.error) {
        error(resInstitution?.message);
        return false;
      }
    }
    
    // const sanitizedFirstName = sanitizeHtml(data.firstName);

//     if (sanitizedFirstName == "") {
//       error("Invalid Name");
//     } else {
//       const datas = {
//         firstName: sanitizedFirstName,
//         lastName: "",
//         username: data.username,
//         phoneNumber: data.phoneNumber,
//         email,
//         address: data.address,
//         memberIdentity: userIdentity,
//         provinceId: Number(data.provinsi),
//         cityId: Number(data.kota),
//         districtId: Number(data.kecamatan),
//         password: data.password,
//         instituteId: Number(institutionId),
//         roleId: Number(category),
//       };

//       const response = await postRegistration(datas);
//       console.log(response);
//       if (response?.error) {
//         error(response?.message);
//         return false;
//       }

//       registerConfirm();
//       return false;
//     }
  }

const handleJournalistCertificate = async () => {
    const response = await getDataJournalist(journalistCertificate);
    const data = response?.data?.data;
    console.log(data);
    if (data) {
      setJournalistData(data[0]);
    }

    console.log("Data jurnalis:", data);
    return data;
  };

  const handleDataNRP = async () => {
    const response = await getDataPersonil(personilNRP);
    const data = response?.data?.data;
    setPersonilData(data);
    console.log("Data personil:", data);
    return data;
  };

  const handleInstituteOption = (e: any) => {
    if (e.target.value == "0") {
      setIsCustomActive(true);
    } else {
      setIsCustomActive(false);
      setInstitusi(e.target.value);
    }
  };

//   const {
//     register,
//     handleSubmit,
//     watch,
//     formState: { errors },
//   } = useForm<Inputs>();
//   const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
//   console.log(watch("example"));

function setDataToForm() {
    if (Number(category) == 6 && journalistData) {
      setValue("firstName", journalistData.journalistName);
      setValue("memberIdentity", journalistData.certNumber);
      const selectedProvince = province.find(
        (o: any) => o.provName == journalistData.province?.toUpperCase(),
      );

      if (selectedProvince !== undefined) {
        setValue("provinsi", selectedProvince.id);
      }
    } else if (Number(category) == 7 && personilData) {
      setValue("firstName", personilData.lastName);
      setValue("memberIdentity", personilData.nrp);
    }
  }


  async function onSubmit(data: any) {

    console.log("Submit");

    if (isValidPassword) {
      MySwal.fire({
        title: "Buat akun",
        text: "",
        icon: "warning",
        showCancelButton: true,
        cancelButtonColor: "#d33",
        confirmButtonColor: "#3085d6",
        confirmButtonText: "Buat",
      }).then((result) => {
        if (result.isConfirmed) {
          save(data);
        }
      });
    } else {
      error("Kata Sandi harus sama");
    }
  }

  const handleIdentity = async (e: any) => {
    const id = e;
    console.log(id);
    await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
    if (Number(category) == 5) {
      const reqId =
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
      const response = await getDataByNIK(reqId, id);
      const data = response?.data?.data_return[0];

      console.log(data);
      if (data !== undefined) {
        setValue("firstName", data.nama_lengkap);
        setValue("address", data.alamat);
        const selectedProvince = province.find(
          (o: any) => o.provName == data.prov?.toUpperCase(),
        );

        if (selectedProvince !== undefined) {
          setValue("provinsi", selectedProvince.id);
        }

        const selectedCity: any = city.find(
          (o: any) => o.cityName == data.kab_kota?.toUpperCase(),
        );

        if (selectedCity !== undefined) {
          setValue("kota", selectedCity?.id);
        }

        const selectedDistrict: any = districts.find(
          (o: any) => o.disName == data.kec?.toUpperCase(),
        );

        if (selectedDistrict !== undefined) {
          setValue("kecamatan", selectedDistrict?.id);
        }
      }
    } else if (Number(category) == 7) {
      const reqId =
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
      const response = await getDataByNRP(reqId, id);
      const data = response?.data?.data_return[0];

      console.log("Data :", data);
      if (data !== undefined) {
        setValue("firstName", data.nama);
        setValue("address", data.lokasi);
      }
    }
  }; 

  const getCity = async (e: any) => {
    const res = await listCity(e);
    setCity(res?.data.data);
  };

  const getDistricts = async (e: any) => {
    const res = await listDistricts(e);
    setDistricts(res?.data.data);
  };

  const handleVerifyOTP = async () => {
    const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;

    if (email != "" && otp.length == 6) {
      console.log("verify otp");
      loading();
      // const response = {
      //   message: "success",
      // };

      const response = await verifyOTP(email, otp);
      if (response?.error) {
        error(response?.message);
        return false;
      }
      close();
      // console.log(response);
      if (response?.message == "success") {
        console.log("success");
        setStepThreeActive(true);
        setFormProfile(true);
        setOtpValidate("");
        setValue("email", email);
        setValue("memberIdentity", userIdentity);
        handleIdentity(userIdentity);
        setDataToForm();
      } else {
        setOtpValidate("Kode OTP Tidak Valid");
      }
    }
  };

  useEffect(() => {
    async function initState() {
      if (category != undefined) {
        const resInstiution = await listInstitusi(category);
        const res = await listProvince();
        setInstitution(resInstiution?.data.data);
        setProvince(res?.data.data);
      }
    }

    initState();
  }, [category]);

  useEffect(() => {
    function initState() {
      for (const element of institution) {
        const { id } = element;

        if (id == institusi) {
          setInstitusiAddress(element.address);
        }
      }
    }

    initState();
  }, [institusi]);

  useEffect(() => {
    async function initState() {
      if (category != undefined) {
        const resInstiution = await listInstitusi(category);
        const res = await listProvince();
        setInstitution(resInstiution?.data.data);
        setProvince(res?.data.data);
      }
    }

    initState();
  }, [category]);

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      style={
        Number(category) < 5
          ? {
              display: "none",
            }
          : {}
      }
    >
      <div className="flex gap-12 justify-center">
        <div className="flex flex-row mt-4 mb-5">
          <ul className="absolute border border-[#f32d2d] w-[235px]">
            <li>
              <div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active" : ""}`}>
                <span>
                  <b>1</b>
                </span>
              </div>
            </li>
            <li>
              <div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active" : ""}`}>
                <span>
                  <b>2</b>
                </span>
              </div>
            </li>
            <li>
              <div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepThreeActive ? "active" : ""}`}>
                <span>
                  <b>3</b>
                </span>
              </div>
            </li>
          </ul>
        </div>

        <div className="flex flex-row">
            <div className="gap-12"
            style={
              stepTwoActive && !formProfile
                ? {
                  display: "none",
                }
                : {}
            }>

            </div>
        </div>
      </div>
    </form>
  );
};

export default page;
