import { 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 } 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";

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

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

  const handleChangeBisnis = (value: string) => {
    setSelectedValueBisnis(value);
    if (value === "true") {
      setIsBisnisRequired(true); // Show and require Individu form
    } else {
      setIsBisnisRequired(false); // Hide and make optional the Individu form
    }
  };

  const handleClick = () => {
    setIsIndividuRequired(!isIndividuRequired)
  };

  const handleClickBisnis = () => {
    setIsBisnisRequired(!isBisnisRequired)
  };

  const handleSubmit = () => {
    console.log("form",form)
    console.log("form Bisnis",formBisnis)
  };
  console.log("isFormValid",isFormValid)
  console.log("isCheckedTNC",isCheckedTNC)
  console.log("mutation.isLoading",mutation.isLoading)
  console.log("isValidCaptcha",isValidCaptcha)

  return (
    <>
      <div className="mt-4">
        <p className="text-black font-bold mb-2">Tipe Bisnis</p>
        <RadioGroup onChange={handleChange} value={selectedValue}>
          <Stack direction='row'>
            <Radio value='PKP'>PKP</Radio>
            <Radio value='Non-PKP'>Non-PKP</Radio>
          </Stack>
        </RadioGroup>
      </div>
      <div className="mt-4 border">
        <div className="p-4">
          <div onClick={handleClick} className="flex justify-between">
            <p>Data Akun</p>
            {isIndividuRequired ? (
              <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>
          {isIndividuRequired && (
            <div>
              <Divider  my={4} />
              <Form type="bisnis" required={isIndividuRequired} />
            </div>
          )}
        </div>
      </div>
      <div className="mt-4 border">
        <div className="p-4">
          <div onClick={handleClickBisnis} className="flex justify-between">
            <p>Data Bisnis</p>
            {isBisnisRequired ? (
              <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>
          {isBisnisRequired && (
            <div>
              <Divider  my={4} />
              <div>
                <p className="text-black font-bold">Bisnis Terdaftar di Indoteknik?</p>
                <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}>
                  <Stack direction='row'>
                    <Radio value='true'>Sudah Terdaftar</Radio>
                    <Radio value='false'>Belum Terdaftar</Radio>
                  </Stack>
                </RadioGroup>
              </div>
              <FormBisnis type="bisnis" required={isIndividuRequired} />
            </div>
          )}
        </div>
      </div>
      <TermCondition />
      <button
        type="submit"
        className="btn-yellow w-full mt-2"
        onClick={handleSubmit}
        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
      >
        {mutation.isLoading ? 'Loading...' : 'Daftar'}
      </button>
      <FormCaptcha />
    </>
  );
};

export default RegistrasiBisnis;