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';
interface FormProps {
  chekValid: boolean;
  buttonSubmitClick: boolean;
}
const RegistrasiBisnis: React.FC<FormProps> = ({
  chekValid,
  buttonSubmitClick,
}) => {
  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}
                chekValid={chekValid}
                buttonSubmitClick={buttonSubmitClick}
              />
            </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}
                chekValid={chekValid}
                buttonSubmitClick={buttonSubmitClick}
              />
            </div>
          )}
        </div>
      </div>

      <h1 className=''></h1>
    </>
  );
};

export default RegistrasiBisnis;