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

export interface DropdownOption {
    id: string;
    title: 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 MultiOption({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
    const [expand, setExpand] = useState(expanded);
    const toggleExpand = () => {
        setExpand((state) => !state);
    }

    return (
        <div className="relative" {...props}>
            <div
                className="flex 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={expanded}
                aria-haspopup='listbox'
                aria-controls=''
                aria-label={title}>
                <label
                    htmlFor='content-select'
                    className='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 />
            </div>

            {expand &&
                <div
                    className='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`}>
                    {options.map((v, i) => {
                        return (
                            <div
                                onClick={(e) => {setExpand(() => false); onSelectionChange(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>
    )
}

export default MultiOption