'use client'
import * as React from 'react'

import { RegisterOptions } from 'react-hook-form'
import { IconProps } from '../icons/icon'
import { cn } from '@/lib/utils/cn'
import { CheckCircleIcon, ErrorIcon } from '../icons/form-icon'

export interface InputProps {
  LeftIcon?: React.ReactElement<React.SVGProps<IconProps>>
  RightIcon?: React.ReactElement<React.SVGProps<IconProps>>
  label?: string
  status?: 'success' | 'error'
  notification?: string
  register?: any
  options?: RegisterOptions
  containerClass?: string
  labelClass?: string
  error?: string
  shouldHandleChange?: boolean
  watch: any
}

function Input({
  className,
  type,
  LeftIcon,
  RightIcon,
  label,
  notification,
  disabled,
  status,
  name,
  options,
  watch,
  register,
  containerClass,
  labelClass,
  error = '',
  shouldHandleChange = false,
  ...props
}: React.ComponentProps<'input'> & InputProps) {
  const inputId = React.useId()
  const [value, setValue] = React.useState(props.defaultValue ?? '')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
    props.onChange?.(e)
  }

  return (
    <div className={cn('', containerClass)}>
      {label && (
        <label
          htmlFor={inputId}
          className={cn(
            'block text-grey-50 caption-medium-medium pointer-events-none pb-2',
            labelClass,
          )}
        >
          {label}
        </label>
      )}
      <div className={cn('group relative flex items-center', disabled && 'cursor-not-allowed')}>
        {LeftIcon && (
          <div className="absolute left-3 flex  items-center pointer-events-none">
            {React.cloneElement(LeftIcon, {
              width: LeftIcon.props.width || 20,
              height: LeftIcon.props.height || 20,
              className: cn(
                LeftIcon.props.className,
                'text-grey-200 group-focus:text-red-500 group-hover:text-grey-100',
                disabled && 'fill-neutral-60 dark:fill-neutral-60',
              ),
            })}
          </div>
        )}
        <input
          id={inputId}
          type={type}
          data-slot="input"
          {...(shouldHandleChange && { onChange: handleChange })}
          {...(shouldHandleChange && { value })}
          disabled={disabled}
          className={cn(
            'font-b2-regular file:text-foreground placeholder:text-grey-200 text-base-white hover:placeholder:text-grey-100   flex items-center justify-center h-12 w-full min-w-0 rounded-md border border-[#FCFCFC33] bg-neutral-700 focus:bg-neutral-700 group-hover:bg-neutral-500 hover:bg-neutral-500 py-3 text-base outline-none file:inline-flex file:h-7 file:border-0 file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed',
            error?.length === 0 && 'focus:border-beige-500',
            error?.length > 0 && 'border-func-red-main dark:border-red',
            LeftIcon ? 'pl-10' : 'pl-4',
            RightIcon ? 'pr-10' : 'pr-4',
            className,
          )}
          {...props}
          {...(register ? register(name, options) : {})}
        />
        {RightIcon && watch(name) && (
          <div
            onClick={(e) => {
              e.stopPropagation()
            }}
            className="absolute right-3 flex items-center"
          >
            {React.cloneElement(RightIcon, {
              width: RightIcon.props.width || 20,
              height: RightIcon.props.height || 20,
              className: cn(
                RightIcon.props.className,
                'text-grey-200 cursor-pointer group-focus:text-red-500 group-hover:text-grey-100',
                disabled && 'fill-neutral-60 dark:fill-neutral-60',
              ),
              onClick: RightIcon.props.onClick || undefined,
            })}
          </div>
        )}
      </div>
      {error?.length > 0 && (
        <div className="flex items-center justify-start mt-2">
          {error?.length > 0 && (
            <ErrorIcon width={20} height={20} className="text-func-red-main flex-shrink-0" />
          )}
          {error?.length > 0 && (
            <p className={cn('label-medium-regular ml-1 text-func-red-main')}>{error}</p>
          )}
        </div>
      )}
    </div>
  )
}

export { Input }
