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 { 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 [isDropIndividu, setIsDropIndividu] = useState(true);
  const [isBisnisClicked, setisBisnisClicked] = useState(true);
  const [selectedValue, setSelectedValue] = useState('PKP');
  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
   const {
    form,
    isCheckedTNC,
    isValidCaptcha,
    errors,
    validate,
    updateForm
  } = 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") {
      updateForm("is_pkp", 'true');
      validate();
    } else {
      updateForm("is_pkp", 'false');
      validate();
    }
  }, [selectedValue,]);
  
  useEffect(() => {
    if (isTerdaftar) {
      updateForm("is_terdaftar", 'true');
      validate();
    } else {
      updateForm("is_terdaftar", 'false');
      validate();
    }
  }, [isTerdaftar,]);

  const   handleChange = (value: string) => {
    setSelectedValue(value);
    if (value === "PKP") {
      validate();
      setIsPKP(true);
    } else {
      validate();
      setIsPKP(false);
      setIsPKP(false);
    }
  };
  
  const handleChangeBisnis = (value: string) => {
    setSelectedValueBisnis(value);
    if (value === "true") {
      validate();
      setIsTerdaftar(true);
    } else {
      validate();
      setIsTerdaftar(false);
    }
  };

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

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

  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>
      
    </>
  );
};

export default RegistrasiBisnis;