import useAuth from '@/core/hooks/useAuth';
import { setAuth } from '@/core/utils/auth';
import addressApi from '@/lib/address/api/addressApi';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import { useEffect, useState, useMemo } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast';
import switchAccountApi from '../api/switchAccountApi';
import FormBisnis from '~/modules/register/components/FormBisnis.tsx';
import RegistrasiBisnis from '~/modules/register/components/RegistrasiBisnis.tsx';
import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
import { useRegisterStore } from '~/modules/register/stores/useRegisterStore.ts';
import { registerUser } from '~/services/auth';
import { useMutation } from 'react-query';
import { isValid } from 'zod';
const SwitchAccount = () => {
  const auth = useAuth();
  const [isOpen, setIsOpen] = useState(true);
  const toggle = () => setIsOpen(!isOpen);
  const [isPKP, setIsPKP] = useState(true);
  const [isTerdaftar, setIsTerdaftar] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
  const [selectedValue, setSelectedValue] = useState('PKP');
  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
  const { register, setValue, handleSubmit } = useForm({
    defaultValues: {
      email: '',
      name: '',
      phone: '',
      password: '',
    },
  });
  const mutation = useMutation({
    mutationFn: (data) => registerUser(data),
  });
  const [notValid, setNotValid] = useState(false);
  const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } =
    useRegisterStore();
  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
  useEffect(() => {
    const loadProfile = async () => {
      const dataProfile = await addressApi({ id: auth.partnerId });
      setValue('email', dataProfile?.email);
      setValue('name', dataProfile?.name);
      setValue('phone', dataProfile?.phone);
    };
    if (auth) loadProfile();
  }, [auth, setValue]);

  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]);

  useEffect(() => {
    updateForm('name', '-');
    updateForm('email', 'example@mail.com');
    updateForm('password', 'example@mail.com');
    updateForm('phone', '081234567890');
    validate();
  }, []);

  const handleChangeBisnis = (value) => {
    setSelectedValueBisnis(value);
    if (value === 'true') {
      validate();
      setIsTerdaftar(true);
    } else {
      validate();
      setIsTerdaftar(false);
    }
  };
  const handleChange = (value) => {
    setSelectedValue(value);
    if (value === 'PKP') {
      validate();
      setIsPKP(true);
    } else {
      validate();
      setIsPKP(false);
      setIsPKP(false);
    }
  };
  const onSubmitHandler = async (values) => {
    // let data = { ...form, id: `${auth.partnerId}` };
    const data = form;
    if (!isFormValid) {
      setNotValid(true);
      setButtonSubmitClick(!buttonSubmitClick);
      return;
    } else {
      setButtonSubmitClick(!buttonSubmitClick);
      setNotValid(false);
    }
    // if (!values.password) delete data.password;
    const isUpdated = await switchAccountApi({ data });

    if (isUpdated?.switch === 'Pending') {
      // setAuth(isUpdated.user);
      // setValue('password', '');
      toast.success('Berhasil mengubah akun', { duration: 1500 });
      setTimeout(() => {
        window.location.reload();
      }, 1500);
      return;
    }
    toast.error('Terjadi kesalahan internal');
  };

  return (
    <>
      <button
        type='button'
        onClick={toggle}
        className='p-4 flex items-center text-left w-full'
      >
        <div className='flex flex-row items-center bg-slate-50'>
          <div className='flex font-semibold mr-2'>Informasi Bisnis</div>
          <div className='text-red-500 text-xs'>
            *Perubahan akun tidak dapat diubah kembali
          </div>
        </div>
        <div className='ml-auto p-2 bg-gray_r-3 rounded'>
          {!isOpen && <ChevronDownIcon className='w-6' />}
          {isOpen && <ChevronUpIcon className='w-6' />}
        </div>
      </button>

      {isOpen && (
        <div className='p-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='profil'
            required={isTerdaftar}
            isPKP={isPKP}
            chekValid={notValid}
            buttonSubmitClick={buttonSubmitClick}
          />
          <div className='flex justify-end mb-4 mr-4'>
            <button
              type='submit'
              onClick={onSubmitHandler}
              className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'
            >
              {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'}
            </button>
          </div>
        </div>
      )}
    </>
  );
};

export default SwitchAccount;
