"use client"
import { XIcon } from "lucide-react";
import { useEffect, useRef, useState } from "react";

interface MultiSelectProps {
    options: { label: string; value: string }[];
    value: string[];
    onChange: (values: string[]) => void;
    placeholder?: string;
    name?: string;
}
const MultiSelect = ({ options, value, onChange, placeholder, name }: MultiSelectProps) => {
    const [isOpen, setIsOpen] = useState(false);
    const multiSelectRef = useRef<HTMLDivElement>(null);

    const handleSelectOption = (optionValue: string) => {
        if (value.includes(optionValue)) return;
        onChange([...value, optionValue]);
    }

    useEffect(() => {
        const handleClickOutside = (e: MouseEvent) => {
            if (
                multiSelectRef.current &&
                !multiSelectRef.current.contains(e.target as Node)
            ) {
                setIsOpen(false);
            }
        };

        document.addEventListener('click', handleClickOutside);

        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    }, []);


    return (
        <div
            ref={multiSelectRef}
            className="relative min-h-9 flex items-center border rounded-md px-3 py-1 text-sm"
            onClick={() => setIsOpen(!isOpen)}
        >
            {/* Hidden Inputs for FormData */}
            {name && value.map((val) => (
                <input key={val} type="hidden" name={`${name}[]`} value={val} />
            ))}

            {value.length === 0 ? (
                <span className="text-[#90A1B9]">{placeholder || 'اختر نوع القرض'}</span>
            ) : (
                <div className="mt-2 flex flex-wrap gap-2 text-[#1D293D]">
                    {value.map((val, index) => (
                        <div className="bg-[#0525311A] shrink-0 rounded-full py-1 px-2 flex items-center gap-2" key={index}>
                            {options.find(o => o.value === val)?.label || val}
                            <button type="button" onClick={(e) => { e.stopPropagation(); onChange(value.filter((v) => v !== val)); }}>
                                <XIcon className="w-4 h-4" />
                            </button>
                        </div>
                    ))}
                </div>
            )}
            {isOpen && (
                <div className="py-1 px-2 w-full z-10 absolute bottom-0 translate-y-full border rounded bg-white left-0 max-h-60 overflow-y-auto">
                    {options.map((option) => (
                        <div
                            className={`${value.includes(option.value) ? 'bg-[#0525311A]' : ''} hover:bg-[#0525311A] mb-1 p-1 cursor-pointer`}
                            onClick={(e) => { e.stopPropagation(); handleSelectOption(option.value); }}
                            key={option.value}>
                            {option.label}
                        </div>
                    ))}
                </div>
            )}
        </div>
    )
}

export default MultiSelect;