import { type FC, type InputHTMLAttributes, useState, useRef, useEffect } from 'react'
import { clx } from '../helpers/utils'
import Error from './Error'
import ColorfilterIcon from '@/assets/images/color.png'

type Props = {
    label?: string
    className?: string
    error_text?: string
    isNotRequired?: boolean
    value?: string
    onChange?: (value: string) => void
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>

const ColorPicker: FC<Props> = (props: Props) => {
    const [color, setColor] = useState<string>(props.value || '#000000')
    const colorInputRef = useRef<HTMLInputElement>(null)

    const inputClass = clx(
        'w-full bg-white h-10 text-black block pl-10 pr-10 text-xs rounded-xl border border-border',
        props.readOnly && 'bg-gray-100 border-0 text-description',
        props.className
    )

    const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const newColor = event.target.value
        setColor(newColor)
        props.onChange?.(newColor)
    }

    const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const value = event.target.value
        if (/^#[0-9A-Fa-f]{0,6}$/.test(value) || value === '') {
            const finalColor = value || '#000000'
            setColor(finalColor)
            props.onChange?.(finalColor)
        }
    }

    const handleColorIconClick = () => {
        if (!props.readOnly) {
            colorInputRef.current?.click()
        }
    }

    useEffect(() => {
        if (props.value !== undefined) {
            setColor(props.value)
        }
    }, [props.value])

    return (
        <div className='w-full'>
            <label className='text-sm'>
                {props.label}
            </label>

            <div className='w-full relative mt-1'>
                <input
                    type='text'
                    value={color}
                    onChange={handleTextChange}
                    placeholder='#000000'
                    readOnly={props.readOnly}
                    className={inputClass}
                />

                <button
                    type='button'
                    onClick={handleColorIconClick}
                    disabled={props.readOnly}
                    className={clx(
                        'absolute top-0 bottom-0 my-auto left-3 cursor-pointer',
                        props.readOnly && 'cursor-not-allowed opacity-50'
                    )}
                >
                    <img src={ColorfilterIcon} alt='color-filter' className='size-7' />
                </button>

                <div
                    className='absolute top-0 bottom-0 my-auto right-3 w-5 h-5 rounded-full'
                    style={{ backgroundColor: color }}
                />

                <input
                    ref={colorInputRef}
                    type='color'
                    value={color}
                    onChange={handleColorChange}
                    className='absolute opacity-0 pointer-events-none w-0 h-0'
                />

                {props.error_text && (
                    <Error errorText={props.error_text} />
                )}
            </div>
        </div>
    )
}

export default ColorPicker