import { ChangeEvent } from "react";
import { useMutation } from "react-query";
import { useRegisterStore } from "~/common/stores/useRegisterStore";
import { RegisterProps } from "~/common/types/auth";
import { registerUser } from "~/services/auth";

const Form = () => {
  const { form, isValid, isCheckedTNC, updateForm, toggleCheckTNC, openTNC } = useRegisterStore()

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    updateForm(name, value)
  }

  const mutation = useMutation({
    mutationFn: (data: RegisterProps) => registerUser(data)
  })

  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
    e.preventDefault()

    const response = await mutation.mutateAsync(form)
    console.log(response);

  }

  return (
    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
      <div>
        <label htmlFor="company">
          Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
        </label>

        <input
          type="text"
          name="company"
          id="company"
          className="form-input mt-3"
          placeholder="cth: INDOTEKNIK DOTCOM GEMILANG"
          autoCapitalize="true"
          value={form.company}
          onChange={handleInputChange}
        />
      </div>

      <div>
        <label htmlFor='name'>Nama Lengkap</label>

        <input
          type='text'
          id='name'
          name='name'
          className='form-input mt-3'
          placeholder='Masukan nama lengkap anda'
          value={form.name}
          onChange={handleInputChange}
        />
      </div>

      <div>
        <label htmlFor='email'>Alamat Email</label>

        <input
          type='text'
          id='email'
          name='email'
          className='form-input mt-3'
          placeholder='Masukan alamat email anda'
          value={form.email}
          onChange={handleInputChange}
        />
      </div>

      <div>
        <label htmlFor='password'>Kata Sandi</label>
        <input
          type='password'
          name='password'
          id='password'
          className='form-input mt-3'
          placeholder='••••••••••••'
          value={form.password}
          onChange={handleInputChange}
        />
      </div>

      <div className="mt-4">
        <input
          type="checkbox"
          name="tnc"
          id="tnc"
          checked={isCheckedTNC}
          onClick={toggleCheckTNC}
        />
        <label htmlFor="tnc" className="ml-2 cursor-pointer">Dengan ini saya menyetujui</label>
        {' '}
        <span
          className="font-medium text-danger-500 cursor-pointer"
          onClick={openTNC}
        >
          syarat dan ketentuan
        </span>
        <label htmlFor="tnc" className="ml-2 cursor-pointer">yang berlaku</label>
      </div>

      <button
        type="submit"
        className="btn-yellow w-full mt-2"
        disabled={!isValid || !isCheckedTNC || mutation.isLoading}
      >
        {mutation.isLoading ? 'Loading...' : 'Daftar'}
      </button>
    </form>
  )
}

export default Form