'use client'

import Button from '@/components/button/PrimaryButton'
import OTPInputField from '@/components/input/MultiInputField'
import {
  AUTH_PAGE_ELEMENT,
  AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS
} from '@/enums'
import clsx from 'clsx'
import { formatCountdown } from '@/hooks/useCountdown'
import Image from 'next/image'
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
  phoneNumber: string
  timerRunning: boolean
  secondsLeft: number
  pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>

function StepEnterOtp ({
  onChange,
  onClick,
  pending,
  disabled = false,
  value,
  phoneNumber,
  timerRunning,
  secondsLeft
}: Props) {
  const [error, setError] = useState('')
  const { t } = useTranslation('auth')

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

  useEffect(() => {
    let error = ''
    if (!/^\d{6}$/.test(value)) {
      error = t('Errors.OTPFormat')
    }

    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='pt-4'>
          {/* // TODO: add persian digits font */}
          <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
          <p className='mt-3 text-[13px]'>
            {t('OTP.Description').replace('{phoneNumber}', phoneNumber)}
          </p>
        </div>
        <div className='w-full flex justify-center items-center'>
          <OTPInputField
            autoFocus
            autoComplete='one-time-code'
            type='text'
            inputMode='numeric'
            className='mt-10 min-h-14 max-w-[304px]'
            maxLength={6}
            htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
            labelText=''
            value={value}
            placeholder=''
            onChange={onChange}
          />
        </div>

        <div className='text-center w-full pt-6 text-xs'>
          <div>
            {timerRunning ? (
              <div>
                {t('OTP.TimerRunning', { time: formatCountdown(secondsLeft, t) })}
              </div>
            ) : (
              <div>
                {t('OTP.TimerOut')}
                <button
                  type='button'
                  disabled={pending}
                  id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
                  className={clsx(
                    'px-1 transition-colors duration-200',
                    !pending
                      ? 'text-primary cursor-pointer'
                      : 'text-neutral-200 cursor-auto'
                  )}
                  onClick={onClick}
                >
                  {t('OTP.TimerReset')}
                </button>
              </div>
            )}
          </div>
        </div>
        <Button
          disabled={disabled || hasError() || value.length <= 0}
          pending={pending}
          type='submit'
        >
          {t('OTP.ButtonSubmit')}
        </Button>
      </div>
    </>
  )
}

export default StepEnterOtp