import React from 'react'
import { Button, FieldMessage, TextField } from '@/components/Form'
import ReCAPTCHA from 'react-google-recaptcha'
import { useForm } from '@/pages/SignIn/hooks'

export const SignInForm = ({ loading, handleModalIsOpen }) => {
  const { handleSubmit, handleChange, setFieldValue, values, errors } = useForm({
    onSubmit: values => {
      console.log({ values })
      // const { affiliateId, recaptcha, password } = values
      // login({
      //   // cpf: affiliateId,
      //   affiliateId,
      //   recaptcha,
      //   password,
      // })
    },
  })

  return (
    <form className='flex flex-col glass-card rounded-2 gap-3 w-full p-3' onSubmit={handleSubmit}>
      <TextField
        label='CPF, CNPJ ou ID Afiliado'
        name='affiliateId'
        placeholder='Ex: 012.345.678-90'
        value={values.affiliateId}
        errorMessage={errors.affiliateId}
        onChange={handleChange}
        isDisabled={loading}
        noMargins
      />
      <div className='flex flex-col gap-1 items-end'>
        <TextField
          label='Senha de Acesso'
          name='password'
          type='password'
          placeholder='******'
          value={values.password}
          errorMessage={errors.password}
          onChange={handleChange}
          isDisabled={loading}
          className='w-full'
          noMargins
        />
        <a href='#' onClick={handleModalIsOpen} className='text-sm text-white underline'>
          Esqueceu sua senha? Clique aqui!
        </a>
      </div>

      <div className='flex flex-col justify-center items-center'>
        <ReCAPTCHA
          name='recaptcha'
          render='explicit'
          onChange={value => setFieldValue('recaptcha', value)}
          sitekey={import.meta.env.VITE_RECAPTCHA_SITE_KEY}
        />
        {errors.recaptcha && <FieldMessage message={errors.recaptcha} className='text-red-500 ' />}
      </div>
      <Button text='Entrar' type='submit' isDisabled={loading} className='w-full text-black' />
    </form>
  )
}