import { ChangeEvent, useEffect, useMemo, useState } from "react";
import FormBisnis from "./FormBisnis";
import Form from "./Form";
import TermCondition from "./TermCondition";
import FormCaptcha from "./FormCaptcha";
import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'
import React from "react";
import {
  ChevronDownIcon,
  ChevronRightIcon
} from '@heroicons/react/24/outline';
import { useRegisterStore } from "../stores/useRegisterStore";
import { useMutation } from "react-query";
import { RegisterProps } from "~/types/auth";
import { registerUser } from "~/services/auth";
import router from "next/router";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import { UseToastOptions, useToast } from "@chakra-ui/react";
import Link from "next/link";

const RegistrasiBisnis = () => {
  const [isPKP, setIsPKP] = useState(true);
  const [isTerdaftar, setIsTerdaftar] = useState(false);
  const [isIndividuRequired, setIsIndividuRequired] = useState(true);
  const [isDropIndividu, setIsDropIndividu] = useState(true);
  const [isBisnisClicked, setisBisnisClicked] = useState(true);
  const [selectedValue, setSelectedValue] = useState('PKP');
  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
   const {
    form,
    formBisnis,
    isCheckedTNC,
    isValidCaptcha,
    errors,
    updateFormBisnis,
    validateFormBisnis,
    validate,
  } = useRegisterStore()
  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
  const toast = useToast()
  const mutation = useMutation({
    mutationFn: (data: RegisterProps) => registerUser(data)
  })

  useEffect(() => {
    if (selectedValue === "PKP") {
      updateFormBisnis("is_pkp", 'true');
      validateFormBisnis();
    } else {
      updateFormBisnis("is_pkp", 'false');
      validateFormBisnis();
    }
  }, [selectedValue,]);

  const   handleChange = (value: string) => {
    setSelectedValue(value);
    if (value === "PKP") {
      validateFormBisnis();
      setIsIndividuRequired(true);
      setIsPKP(true);
    } else {
      setIsPKP(false);
      setIsIndividuRequired(false); // Hide and make optional the Individu form
      setIsPKP(false);
    }
  };

  const handleChangeBisnis = (value: string) => {
    setSelectedValueBisnis(value);
    if (value === "true") {
      setIsTerdaftar(true);
    } else {
      setIsTerdaftar(false);
    }
  };

  const handleClick = () => {
    setIsDropIndividu(!isDropIndividu)
  };

  const handleClickBisnis = () => {
    setisBisnisClicked(!isBisnisClicked)
  };

  const handleSubmit = async () => {
    console.log("form",form)
    console.log("form Bisnis",formBisnis)
    const response = await mutation.mutateAsync(formBisnis)

    console.log("response",response)

    if (response?.register === true) {
      const urlParams = new URLSearchParams({
        activation: 'otp',
        email: form.email,
        redirect: (router.query?.next || '/') as string
      })
      router.push(`${router.route}?${urlParams}`)
    }

    const toastProps: UseToastOptions = {
      duration: 5000,
      isClosable: true
    }

    switch (response?.reason) {
      case 'EMAIL_USED':
        toast({
          ...toastProps,
          title: 'Email sudah digunakan',
          status: 'warning'
        })
        break;
      case 'NOT_ACTIVE':
        const activationUrl = `${router.route}?activation=email`
        toast({
          ...toastProps,
          title: 'Akun belum aktif',
          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
          status: 'warning'
        })
        break
    }
  };
  return (
    <>
      
      <div className="mt-4 border">
        <div className="p-4">
          <div onClick={handleClick} className="flex justify-between">
          <p className="text-2xl font-semibold text-center md:text-left">
              Data Akun
            </p>
            {isDropIndividu ? (
              <div className="flex">
                <ChevronDownIcon onClick={handleClick} className='h-6 w-6 text-black' />
              </div>
            ) : (
              <ChevronRightIcon onClick={handleClick} className='h-6 w-6 text-black' />
            )}
          </div>
          {isDropIndividu && (
            <div>
              <Divider  my={4} />
              <Form type="bisnis" required={true} isBisnisRegist={true} />
            </div>
          )}
        </div>
      </div>
      <div className="mt-4 border">
        <div className="p-4">
          <div onClick={handleClickBisnis} className="flex justify-between">
          <p className="text-2xl font-semibold text-center md:text-left">
              Data Bisnis
            </p>
            {isBisnisClicked ? (
              <div className="flex">
                <ChevronDownIcon onClick={handleClickBisnis} className='h-6 w-6 text-black' />
              </div>
            ) : (
              <ChevronRightIcon onClick={handleClickBisnis} className='h-6 w-6 text-black' />
            )}
          </div>
          {isBisnisClicked && (
            <div>
              <Divider  my={4} />
              <div>
                <p className="text-black font-bold mb-2">Bisnis Terdaftar di Indoteknik?</p>
                <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}>
                  <Stack direction='row'>
                    <Radio colorScheme="red" value='true'>Sudah Terdaftar</Radio>
                    <Radio colorScheme="red" value='false' className="ml-2">Belum Terdaftar</Radio>
                  </Stack>
                </RadioGroup>
              </div>
              <div className="mt-4">
        <p className="text-black font-bold mb-2">Tipe Bisnis</p>
        <RadioGroup onChange={handleChange} value={selectedValue}>
          <Stack direction='row' className="font-bold">
            <Radio colorScheme="red" value='PKP'>PKP</Radio>
            <Radio colorScheme="red" value='Non-PKP' className="ml-4">Non-PKP</Radio>
          </Stack>
        </RadioGroup>
      </div>
              <FormBisnis type="bisnis" required={isTerdaftar} isPKP={isPKP} />
            </div>
          )}
        </div>
      </div>
      <h1 className=""></h1>
      <FormCaptcha />
      <TermCondition />
      <Button
        type="submit"
        colorScheme="red"
        className="w-full mt-2"
        size='lg'
        onClick={handleSubmit}
        // disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}  
      >
        {mutation.isLoading ? 'Loading...' : 'Daftar'}
      </Button>
    </>
  );
};

export default RegistrasiBisnis;