import React, { useState } from 'react'
import { Box, Typography, Input, Icon, Button, unityTheme } from '@ntpkunity/controls'
import { ControlWrap } from './loginStyle'
import { useForm, Controller } from 'react-hook-form'
import { validation } from '../../../../shared/helper/methods'
import { loginService } from '../../services/index'
import { ILoginProps } from './login.types'

export const LoginComponent: React.FC<ILoginProps> = ({ app, setResponse }) => {
  const form: {
    handleSubmit: any
    control: any
    reset: any
    formState: any
  } = useForm<{ user_name: '', password: '' }>()

  const { control, handleSubmit, formState: { errors } } = form
  const [showPassword, setShowPassword] = useState(false)

  const handleShowPassword = (): void => {
    setShowPassword(!showPassword)
  }

  const onSubmit = (data: any): void => {
    loginService(data).then(res => {
      setResponse({ data: res.data, status: res.status, message: res?.message })
    }).catch(error => {
      setResponse({ message: error?.response?.data?.detail, status: error?.response?.status, data: null })
    })
  }

  return (
    <ControlWrap theme={unityTheme} className="control-wrap">
      <Typography theme={unityTheme} variant="h2" component='h2' mb={4}>
        Welcome to <span className='text-primary'>{app}</span>
      </Typography>
      <form onSubmit={(e) => e.preventDefault()}>
        <Box theme={unityTheme} className="scrollable-content">
          <Controller
            name="user_name"
            control={control}
            rules={validation('Email address', true, true)}
            render={({ field: { onChange, value } }) => (
              <Input
                theme={unityTheme}
                fullWidth type={'text'}
                label='Email Address'
                id="user_name"
                onChange={onChange}
                value={value}
                error={errors?.user_name?.message}
              />
            )} />
          <Controller
            name="password"
            control={control}
            rules={validation('Password', true)}
            render={({ field: { onChange, value } }) => (
              <Input
                theme={unityTheme}
                fullWidth
                type={showPassword ? 'text' : 'password'}
                label='Password'
                id="password"
                onChange={onChange}
                value={value}
                endAdornment={<Icon onClick={handleShowPassword} name='IcView' />}
                error={errors?.password?.message}
              />
            )} />
        </Box>
      </form>
      <Box theme={unityTheme} mt={0.5} className="fp-link" mb={4}>
        <a href="#" className="decoration-none">
          <Typography theme={unityTheme} variant="caption" component="small">Forgot your password?</Typography>
        </a>
      </Box>
      <Button type={'submit'} onClick={handleSubmit(onSubmit)} primary text='Login' fullWidth theme={unityTheme} />

    </ControlWrap>
  )
}

export default LoginComponent
