legalgo-FE-reactrouter/app/components/ui/input-file.tsx

import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
import { CloudArrowUpIcon } from '@heroicons/react/24/solid'
import { useEffect, type ComponentProps, type ReactNode } from 'react'
import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
import { useRemixFormContext } from 'remix-hook-form'
import { twMerge } from 'tailwind-merge'

import { useAdminContext, type TUpload } from '~/contexts/admin'

import { Button } from './button'

type TInputProperties = Omit<ComponentProps<'input'>, 'size'> & {
  id: string
  label?: ReactNode
  name: string
  rules?: RegisterOptions
  containerClassName?: string
  labelClassName?: string
  category: TUpload
}

export const InputFile = (properties: TInputProperties) => {
  const {
    id,
    label,
    name,
    rules,
    placeholder,
    disabled,
    className,
    containerClassName,
    labelClassName,
    category,
    ...restProperties
  } = properties
  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
    useAdminContext()

  const {
    register,
    formState: { errors },
    setValue,
  } = useRemixFormContext()

  const error: FieldError = get(errors, name)

  useEffect(() => {
    if (uploadedFile && isUploadOpen === (category || name)) {
      setValue(name, uploadedFile)
      setUploadedFile(undefined)
      setIsUploadOpen(undefined)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [uploadedFile])

  return (
    <Field
      className={twMerge('relative', containerClassName)}
      disabled={disabled}
      id={id}
    >
      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
        {label} {error && <span className="text-red-500">{error.message}</span>}
      </Label>
      <HeadlessInput
        className={twMerge(
          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 pr-8',
          className,
        )}
        placeholder={placeholder}
        {...register(name, rules)}
        {...restProperties}
      />
      <Button
        type="button"
        variant="icon"
        size="fit"
        className="absolute right-3 h-[42px]"
        onClick={() => {
          setIsUploadOpen(category)
        }}
      >
        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
      </Button>
    </Field>
  )
}