'use client'

import { useThemeClient } from '@/hooks/useThemeClient'
import { TextField, TextFieldProps } from '@mui/material'
import { ReactNode } from 'react'
import { FieldValues, Path, UseFormRegister } from 'react-hook-form'

type InputMuiProps<T extends FieldValues> = TextFieldProps & {
  label: string
  variant: 'standard' | 'filled' | 'outlined'
  themeColor?: string
  children?: ReactNode
  name: Path<T>
  register: UseFormRegister<T>
}

export const InputMui = <T extends FieldValues>({
  label,
  variant,
  children,
  themeColor = '#fafafa',
  register,
  name,
  ...rest
}: InputMuiProps<T>) => {
  const themeConfig = useThemeClient()

  const color = themeConfig === 'dark' ? themeColor : '#3C3C3C'

  return (
    <TextField
      label={label}
      variant={variant}
      {...register(name)}
      {...rest}
      sx={{
        '& .MuiOutlinedInput-root': {
          '& fieldset': {
            borderColor: color,
          },
          '&:hover fieldset': {
            borderColor: color,
          },
          '&.Mui-focused fieldset': {
            borderColor: color,
          },
        },
        '& label.Mui-focused': {
          color: `${color}`,
        },
        '& label': {
          color: `${color}`,
        },
        '& input': {
          color: `#fafafa`,
        },
        '& .MuiInputBase-input': {
          color: `#fafafa`,
        },
        '& .MuiInput-underline:before': {
          borderBottomColor: color,
        },
        '& .MuiInput-underline:hover:before': {
          borderBottomColor: `${color} !important`,
        },
        '& .MuiInput-underline:after': {
          borderBottomColor: color,
        },
        '& .MuiFilledInput-underline:before': {
          borderBottomColor: color,
        },
        '& .MuiFilledInput-underline:hover:before': {
          borderBottomColor: `${color} !important`,
        },
        '& .MuiFilledInput-underline:after': {
          borderBottomColor: color,
        },
      }}
    >
      {children}
    </TextField>
  )
}
