dmenu-plus-front/src/components/combobox/SearchComboBox.tsx

import React, { useState } from 'react'
import ArrowDownIcon from '../icons/ArrowDownIcon';

export interface DropdownOption {
    id: string;
    title: string;
    label?: string;
}

type Props = {
    title: string;
    options: Array<DropdownOption>;
    expanded?: boolean;
    selectedId: string;
    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
} & React.HTMLAttributes<HTMLDivElement>

function SearchComboBox({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
    const [expand, setExpand] = useState(expanded);
    const [searchValue, setSearchValue] = useState('');
    const toggleExpand = () => {
        setExpand((state) => !state);
        setSearchValue(() => '');
    }
    const searchChanged = (e: React.ChangeEvent<HTMLInputElement> | undefined) => {
        setSearchValue((state) => e?.target.value ?? state);
    }
    const setSelection = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
        onSelectionChange(e, index)
        setExpand(() => false);
    }

    return (
        <div className={`relative ${props.className ?? ''}`} {...props}>
            <div
                
                className="flex group w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
                tabIndex={0}
                onClick={toggleExpand}
                role='combobox'
                aria-expanded={expand}
                aria-haspopup='listbox'
                aria-controls=''
                aria-label={title}>
                <label
                    htmlFor='content-select'
                    className='pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]'>
                    <span className='relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap'>
                        {title}
                    </span>
                </label>

                <div className='w-full text-sm2'>
                    {options.filter(x => x.id === selectedId)[0]?.title ?? ''}
                </div>

                <ArrowDownIcon data-expand={expand} className='transition-all duration-200 group-focus-within:rotate-x-180' />

                <div
                    data-expand={expand}
                    className='group-focus-within:block hidden absolute top-full left-0 w-full mt-1 bg-white rounded-xl border border-solid border-neutral-200 shadow-lg z-10'
                    role='listbox'
                    aria-label={`${title} options`}>
                    <div className='w-full p-2'>
                        <input placeholder='جستجو ...' className='w-full outline-none text-sm2' onChange={searchChanged} value={searchValue} />
                    </div>
                    <hr className="text-white/40" />
                    {options
                        .filter((v) => v.title?.includes(searchValue))
                        .map((v, i) => {
                            return (
                                <div
                                    onClick={(e) => {setSelection(e, i)}}
                                    key={v.id}
                                    data-selected={v.id === selectedId}
                                    className='flex items-center justify-end px-3 py-3 cursor-pointer hover:bg-gray-50 first:rounded-t-xl last:rounded-b-xl'
                                    tabIndex={0}
                                    role='option'
                                    aria-selected>
                                    <span
                                        className='text-sm2 tracking-[0.13px] leading-5 w-full'
                                    >
                                        {v.title}
                                    </span>
                                </div>
                            )
                        })}
                </div>
            </div>
        </div>
    )
}

export default SearchComboBox