import React from 'react'
import { Box, Typography, Input, Button, unityTheme } from '@ntpkunity/controls'
import { ControlWrap } from './signupStyle'
import { validation } from '../../../../shared/helper/methods'
import { useForm, Controller } from 'react-hook-form'
import ReCAPTCHA from 'react-google-recaptcha'
import { signupService } from '../../services/index'
import { ISignupProps } from './signup.types'

export const SignupComponent: React.FC<ISignupProps> = ({ setResponse, verificationScreenUrl }) => {
  const form: {
    handleSubmit: any
    control: any
    reset: any
    formState: any
  } = useForm<{}>()

  const { control, handleSubmit, formState: { errors }, reset } = form
  const [isVerified, setIsVerified] = React.useState(false)
  const recaptchaRef = React.useRef<ReCAPTCHA>(null)

  const onChangeRe = (result: any): void => {
    if (result.length > 0) {
      setIsVerified(true)
    }
  }

  const onSubmit = (data: any): void => {
    data.verification_url = verificationScreenUrl
    recaptchaRef?.current?.reset()
    if (isVerified) {
      signupService(data).then(res => {
        setResponse({ data: res.data, status: res.status, message: res?.meesage })
        reset()
        setIsVerified(false)
      }).catch(error => {
        setResponse({ data: null, message: error?.response?.data?.detail, status: error?.response?.status })
        setIsVerified(false)
      })
    }
  }

  return (
    <ControlWrap theme={unityTheme} className="control-wrap">
      <Typography theme={unityTheme} variant="h2" component='h2' mb={4}>
        Let&apos;s Get <span className='text-primary'>Started</span>
      </Typography>
      <form onSubmit={handleSubmit}>
        <Box theme={unityTheme} className="scrollable-content">
          <Controller
            name="email"
            control={control}
            rules={validation('Email address', true, true)}
            render={({ field: { onChange, value } }) => (
              <Input
                theme={unityTheme}
                fullWidth type={'text'}
                label='Enter Your Email Address'
                id="user_name"
                onChange={onChange}
                value={value}
                error={errors?.email?.message}
              />
            )} />
          <Typography theme={unityTheme} variant="body2" component="span" className='text-muted' display='block' mb={4}>We will send you a verification link on this email address to continue with your sign up process.</Typography>
        </Box>
        <Box theme={unityTheme} className="captcha-box" width={'100%'} mb={4}>
          <Controller
            name="email"
            control={control}
            rules={validation('Email address', true, true)}
            render={({ field: { onChange, value } }) => (
              <ReCAPTCHA
                sitekey='6LfER2siAAAAAOupt1yt55sW908nhOok9dtnNa5H'
                ref={recaptchaRef}
                onChange={onChangeRe}
                onExpired={() => { setIsVerified(false) }}
              />
            )} />
        </Box>
        <Button disabled={!isVerified} type={'submit'} onClick={handleSubmit(onSubmit)} primary text='Send Verification Link' fullWidth theme={unityTheme} />
      </form>
      {/* <Box theme={unityTheme} mt={4}>
        <Typography theme={unityTheme} className='text-muted' variant='body2' component='span'>
          Already a member? <a href="#" className="decoration-none text-primary">Login</a>
        </Typography>

      </Box> */}
    </ControlWrap>
  )
}

export default SignupComponent
