import { useState } from 'react';
import { Checkbox, CheckboxGroup, SearchField } from '@heroui/react';
import { PlusIcon } from '@heroicons/react/24/solid';

export interface PickerItem {
    id: number;
    label: string;
    sub?: string;
}

interface Props {
    label: string;
    items: PickerItem[];
    value: number[];
    onChange: (ids: number[]) => void;
    searchPlaceholder?: string;
    emptyText?: string;
    onAdd?: () => void;
}

export function MultiCheckPicker({ label, items, value, onChange, searchPlaceholder = 'Cari...', emptyText = 'Belum ada data.', onAdd }: Props) {
    const [search, setSearch] = useState('');
    const q = search.toLowerCase();
    const filtered = items.filter((it) => it.label.toLowerCase().includes(q) || it.sub?.toLowerCase().includes(q));

    return (
        <CheckboxGroup value={value.map(String)} onChange={(keys) => onChange(keys.map(Number))}>
            <span className="text-[13px] font-medium text-gray-600">
                {label} <span className="text-gray-400">(terpilih {value.length})</span>
            </span>
            <div className="mb-2 flex items-center gap-2">
                <SearchField value={search} onChange={setSearch} className="flex-1" aria-label={searchPlaceholder}>
                    <SearchField.Group>
                        <SearchField.SearchIcon />
                        <SearchField.Input placeholder={searchPlaceholder} />
                        <SearchField.ClearButton />
                    </SearchField.Group>
                </SearchField>
                {onAdd && (
                    <button
                        type="button"
                        onClick={onAdd}
                        title="Tambah baru"
                        className="shrink-0 flex items-center justify-center h-9 w-9 rounded-lg bg-sky-600 text-white hover:bg-sky-700"
                    >
                        <PlusIcon className="w-4 h-4" />
                    </button>
                )}
            </div>
            <div className="flex flex-col gap-2 rounded-xl border border-gray-200 bg-gray-50/50 p-3 max-h-64 overflow-y-auto">
                {items.length === 0 && <span className="text-sm text-gray-400">{emptyText}</span>}
                {items.length > 0 && filtered.length === 0 && (
                    <span className="text-sm text-gray-400">Tidak ditemukan.</span>
                )}
                {filtered.map((it) => (
                    <Checkbox key={it.id} value={String(it.id)}>
                        <Checkbox.Content className="gap-2">
                            <Checkbox.Control>
                                <Checkbox.Indicator />
                            </Checkbox.Control>
                            <span className="text-sm text-gray-700">
                                {it.label}
                                {it.sub && <span className="text-gray-400"> - {it.sub}</span>}
                            </span>
                        </Checkbox.Content>
                    </Checkbox>
                ))}
            </div>
        </CheckboxGroup>
    );
}