import { ChevronDown } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';

export type MultiSelectOption = {
    value: string;
    label: string;
};

type Props = {
    id?: string;
    options: MultiSelectOption[];
    value: string[];
    onChange: (value: string[]) => void;
    placeholder?: string;
    className?: string;
};

export function MultiSelect({
    id,
    options,
    value,
    onChange,
    placeholder = 'Sélectionner…',
    className,
}: Props) {
    const selectedLabels = options
        .filter((option) => value.includes(option.value))
        .map((option) => option.label);

    function toggle(optionValue: string, checked: boolean) {
        onChange(
            checked
                ? [...value, optionValue]
                : value.filter((current) => current !== optionValue),
        );
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    id={id}
                    type="button"
                    variant="outline"
                    className={cn(
                        'h-auto min-h-9 w-full justify-between px-3 py-2 font-normal',
                        selectedLabels.length === 0 && 'text-muted-foreground',
                        className,
                    )}
                >
                    <span className="flex flex-1 flex-wrap gap-1 text-left">
                        {selectedLabels.length === 0 ? (
                            placeholder
                        ) : (
                            selectedLabels.map((label) => (
                                <Badge
                                    key={label}
                                    variant="secondary"
                                    className="font-normal"
                                >
                                    {label}
                                </Badge>
                            ))
                        )}
                    </span>
                    <ChevronDown className="size-4 shrink-0 opacity-50" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
                className="max-h-60 w-(--radix-dropdown-menu-trigger-width) overflow-y-auto"
                align="start"
            >
                {options.length === 0 ? (
                    <p className="text-muted-foreground px-2 py-1.5 text-sm">
                        Aucune option disponible.
                    </p>
                ) : (
                    options.map((option) => (
                        <DropdownMenuCheckboxItem
                            key={option.value}
                            checked={value.includes(option.value)}
                            onCheckedChange={(checked) =>
                                toggle(option.value, checked === true)
                            }
                            onSelect={(event) => event.preventDefault()}
                        >
                            {option.label}
                        </DropdownMenuCheckboxItem>
                    ))
                )}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}