'use client'

import Button from '@/components/button/PrimaryButton'
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
import InputField from '@/components/input/InputField'
import { AUTH_PAGE_ELEMENT } from '@/enums'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

type Props = {
  onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
    React.ChangeEventHandler<HTMLInputElement>
  onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
  value: string
  passwordVisible: boolean
  rememberMe: boolean
  pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

function StepEnterPassword ({
  onChange,
  onClick,
  pending,
  disabled = false,
  value,
  passwordVisible,
  rememberMe
}: Props) {
  const [error, setError] = useState('')
  const { t } = useTranslation('auth')

  const hasError = (e = error) => {
    return e.trim().length > 0
  }

  useEffect(() => {
    let error = ''
    if (value.length > 0) {
      if (!/^.{6,}$/.test(value)) {
        error = t('Errors.PasswordLength')
      }
    }

    setError(error)
  }, [t, value])

  return (
    <>
      <Image
        className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
        src={'/assets/images/login-banner.png'}
        alt='login banner'
        width={100}
        height={100}
        unoptimized
        priority
      />
      <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
        <div className='w-full'>
          <div className='pt-4'>
            <h6 className='text-lg font-bold'>{t('EnterPass.Heading')}</h6>
            <p className='mt-3 text-[13px]'>{t('EnterPass.Description')}</p>
          </div>
          <InputField
            valid={!hasError()}
            aria-errormessage={error}
            autoFocus
            autoComplete='current-password'
            className='mt-10 bg-container'
            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
            labelText={t('EnterPass.LabelPass')}
            value={value}
            placeholder=''
            onChange={onChange}
            type={passwordVisible ? 'text' : 'password'}
          >
            <button
              className='ps-3'
              id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD}
              type='button'
              onClick={onClick}
            >
              <EyeToggleIcon
                slash={passwordVisible}
                className='pointer-events-none'
              />
            </button>
          </InputField>
          <div className='inline-flex justify-between items-center w-full pt-3'>
            <Link
              href={'/auth/forgot-password'}
              id={AUTH_PAGE_ELEMENT.RESET_PASSWORD}
              type='button'
              className='text-sm2 cursor-pointer'
            >
              {t('EnterPass.ButtonRecover')}
            </Link>

            <div className='inline-flex justify-between items-center'>
              {/* TODO: customize checkbox */}
              <label
                htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
                className='text-sm2 px-2 py-0.5 mt-0.5'
              >
                {t('EnterPass.LabelRememberance')}
              </label>
              <input
                name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
                id={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
                className='h-4.5 w-4.5 checked:accent-primary'
                onChange={onChange}
                type='checkbox'
                checked={rememberMe}
              />
            </div>
          </div>
        </div>
        <Button
          disabled={disabled || hasError() || value.length <= 0}
          pending={pending}
          type='submit'
        >
          {t('EnterPass.ButtonSubmit')}
        </Button>
      </div>
    </>
  )
}

export default StepEnterPassword
