import { Depan } from '@/components/Layouts'
import { useAuth } from '@/hooks/auth'
import { useFormik } from 'formik'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { Button } from 'primereact/button'
import { Captcha } from 'primereact/captcha'
import { InputText } from 'primereact/inputtext'
import { Password } from 'primereact/password'
import { Toast } from 'primereact/toast'
import { useRef, useState } from 'react'

export default function Login() {
	const toast = useRef(null)
	const { login } = useAuth({})
	const [loading, setLoading] = useState(false)

	const formik = useFormik({
		initialValues: {
			username: '',
			password: '',
			recaptcha: '',
		},
		validate: (data) => {
			let errors = {}
			if (!data.username) errors.username = 'Username is required.'
			if (!data.password) errors.password = 'Password is required.'
			if (!data.recaptcha) errors.recaptcha = 'Recaptcha is required.'

			return errors
		},
		onSubmit: (data) => {
			setLoading(true)
			const username = data.username
			const password = data.password
			const recaptcha = data.recaptcha

			login({ username, password, recaptcha, toast, setLoading })
		},
		validateOnChange: false,
	})

	const isFieldValid = (field) => !!(formik.touched[field] && formik.errors[field])
	const errorFieldMessage = (field) => {
		return (
			isFieldValid(field) && (
				<small className='p-error' style={{ fontSize: '11px' }}>
					{formik.errors[field]}
				</small>
			)
		)
	}

	const handleCaptcha = (captcha) => {
		formik.setFieldValue('recaptcha', captcha)
	}

	return (
		<>
			<Toast ref={toast} position='bottom-right' />
			<Head>
				<title>Login</title>
			</Head>
			<Depan>
				<div className='mb-3 mt-10 text-center'>
					<Image alt='logo' src={'/img/e-verif-title.png'} width={511 / 6} height={540 / 6} />
				</div>
				<p className='text-center font-bebas 2xl:text-3xl text-2xl'>
					SISTEM APLIKASI <br /> PENYELESAIAN TAGIHAN dan PERTANGGUNGJAWABAN KEUANGAN
				</p>
				<p className='2xl:text-2xl font-medium mt-10'>Login</p>
				<p className='2xl:text-base text-xs'>Enter your username and password to sign in</p>
				<form onSubmit={formik.handleSubmit}>
					<div className='flex flex-col mt-3'>
						<label htmlFor='username' className='text-sm 2xl:text-lg'>
							Username
						</label>
						<InputText
							name={'username'}
							id={'username'}
							placeholder={'Your username'}
							value={formik.values.username}
							onChange={formik.handleChange}
						/>
						{errorFieldMessage('username')}
					</div>
					<div className='flex flex-col mt-3'>
						<label htmlFor='password' className='text-sm 2xl:text-lg'>
							Password
						</label>
						<Password
							name={'password'}
							id={'password'}
							placeholder={'Your password'}
							value={formik.values.password}
							onChange={formik.handleChange}
							toggleMask={true}
							feedback={false}
							inputStyle={{ width: '100%' }}
						/>
						{errorFieldMessage('password')}
					</div>
					<div className='flex mt-3 justify-end text-sm 2xl:text-base'>
						<Link href={'/'}>
							<a className='text-xs 2xl:text-lg'>Forgot password?</a>
						</Link>
					</div>
					<Captcha
						id={'recaptcha'}
						siteKey='6Lc8zOwgAAAAAH0Zu_uYLAi223irUrsM65SZm7-C'
						onResponse={(captcha) => handleCaptcha(captcha)}
						className='relative 2xl:my-3 left-1/2 -translate-x-1/2'
					/>
					{errorFieldMessage('recaptcha')}
					<Button
						label='Sign in'
						type='submit'
						className='w-full h-10'
						onClick={formik.handleSubmit}
						loading={loading}
					></Button>
				</form>
			</Depan>
		</>
	)
}
