import * as React from 'react'
import { Box, Typography, Input, Button, unityTheme } from '@ntpkunity/controls'
import { ControlWrap } from './forgotPasswordStyle'
// import { useState } from 'react'
import { IForgotPasswordProps } from './ForgotPasswordComponent.types'
import { useForm, Controller } from 'react-hook-form'
import { validation } from '../../../../shared/helper/methods'
import { forgotPasswordService } from '../../services/index'

export const ForgotPasswordComponent: React.FC<IForgotPasswordProps> = ({
  setResponse,
  nextScreenUrl,
  theme,
  heading = 'Forgot Password?',
  label = 'Enter Your Registered Email Address',
  buttonText = 'Send Reset Link',
  message = 'Please enter your registered email address for security purposes. When you receive the reset password email, please follow the instructions.',
  onChange
}) => {
  // const [errorMessage, setErrorMessage] = useState('')
  const form: {
    handleSubmit: any
    control: any
    reset: any
    formState: any
  } = useForm<{ user_name: '' }>()

  const { control, handleSubmit, formState: { errors } } = form
  // const { mutate: login } = useMutationLogin()

  const onSubmit = (data: any): void => {
    data.verification_url = nextScreenUrl

    forgotPasswordService(data).then(res => {
      setResponse({ data: res.data, status: res.status })
    }).catch(error => {
      setResponse({ message: error?.response?.data?.detail, status: error?.response?.status })
    })
  }

  return (
    <ControlWrap theme={unityTheme} className="control-wrap">
      <Typography theme={unityTheme} variant="h2" component='h2' mb={4}>
        {heading}
      </Typography>
      <form onSubmit={(e) => e.preventDefault()}></form>
      <Box theme={unityTheme} className="scrollable-content" mb={4}>
      <Controller
            name="email"
            control={control}
            rules={validation('Email address', true, true)}
            render={({ field: { onChange, value } }) => (
        <Input theme={unityTheme}
         fullWidth type={'text'}
         label= {label}
         placeholder='sample@sample.com'
         onChange={onChange}
         value={value}
         error={errors?.email?.message}
         />
            )} />
      </Box>
      <Button type={'submit'} primary text={buttonText} onClick={handleSubmit(onSubmit)} fullWidth theme={unityTheme} />
      <Box theme={unityTheme} mt={4}>
        <Typography theme={unityTheme} className='text-muted' variant='body2' component='span'>
          {message}
        </Typography>
      </Box>
    </ControlWrap>
  )
}

export default ForgotPasswordComponent
