import { getAvailableWidgets, type JourneyLayoutItem, type JourneyWidgetId } from './widget-registry';

interface JourneyAddWidgetSidebarProps {
    open: boolean;
    items: JourneyLayoutItem[];
    onAdd: (id: JourneyWidgetId) => void;
    onClose: () => void;
    onReset: () => void;
}

const JourneyAddWidgetSidebar = ({
    open,
    items,
    onAdd,
    onClose,
    onReset,
}: JourneyAddWidgetSidebarProps) => {
    if (!open) return null;

    const available = getAvailableWidgets(items);

    return (
        <aside className="panel w-full lg:w-72 shrink-0 lg:sticky lg:top-4 h-fit">
            <div className="mb-3 flex items-center justify-between gap-2">
                <h4 className="font-semibold">Add widget</h4>
                <button type="button" className="btn btn-outline-dark btn-sm" onClick={onClose}>
                    Tutup
                </button>
            </div>
            <p className="text-xs text-gray-500 mb-3">
                Klik widget untuk menambahkannya ke canvas Ringkasan.
            </p>
            <div className="space-y-2 max-h-[60vh] overflow-y-auto">
                {available.length === 0 ? (
                    <p className="text-sm text-gray-400">Semua widget sudah ditampilkan.</p>
                ) : (
                    available.map((w) => (
                        <button
                            key={w.id}
                            type="button"
                            className="w-full rounded border border-gray-200 p-3 text-left hover:border-primary hover:bg-primary/5"
                            onClick={() => onAdd(w.id)}
                        >
                            <div className="font-medium text-sm">{w.title}</div>
                            <div className="text-xs text-gray-500 mt-0.5">{w.description}</div>
                        </button>
                    ))
                )}
            </div>
            <button type="button" className="btn btn-outline-primary btn-sm w-full mt-4" onClick={onReset}>
                Reset ke default
            </button>
        </aside>
    );
};

export default JourneyAddWidgetSidebar;