import { Plus } from 'lucide-react';
import { FilterRuleRow } from '@/components/data-table/filter-rule-row';
import type { DataTableFilterFieldOption, DataTableFilterRule } from '@/components/data-table/types';
import { Button } from '@/components/ui/button';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';

type DataTableFiltersSheetProps<TField extends string> = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    fields: DataTableFilterFieldOption<TField>[];
    rules: DataTableFilterRule<TField>[];
    onRulesChange: (rules: DataTableFilterRule<TField>[]) => void;
    onApply: () => void;
    onClear: () => void;
};

export function DataTableFiltersSheet<TField extends string>({
    open,
    onOpenChange,
    fields,
    rules,
    onRulesChange,
    onApply,
    onClear,
}: DataTableFiltersSheetProps<TField>) {
    const addRule = () => {
        const firstField = fields[0];

        if (!firstField) {
            return;
        }

        onRulesChange([
            ...rules,
            {
                id: crypto.randomUUID(),
                field: firstField.value,
                operator: firstField.operators[0],
                value: '',
            },
        ]);
    };

    const hasRules = rules.length > 0;

    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent side="right" className="w-full sm:max-w-2xl">
                <SheetHeader>
                    <SheetTitle>Filtre avansate</SheetTitle>
                    <SheetDescription>
                        Construieste filtre combinate fara aglomerare in header-ul tabelului.
                    </SheetDescription>
                </SheetHeader>

                <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 pb-4">
                    {hasRules ? (
                        rules.map((rule, index) => (
                            <FilterRuleRow
                                key={rule.id}
                                rule={rule}
                                fields={fields}
                                onChange={(nextRule) => {
                                    const nextRules = [...rules];
                                    nextRules[index] = nextRule;
                                    onRulesChange(nextRules);
                                }}
                                onRemove={() => onRulesChange(rules.filter((item) => item.id !== rule.id))}
                            />
                        ))
                    ) : (
                        <div className="rounded-md border border-dashed p-6 text-sm text-muted-foreground">
                            Nu exista filtre adaugate.
                        </div>
                    )}

                    <Button type="button" variant="outline" onClick={addRule} className="w-fit">
                        <Plus className="mr-2 h-4 w-4" />
                        Adauga filtru
                    </Button>
                </div>

                <SheetFooter className="flex-row justify-end gap-2 border-t pt-4">
                    <Button type="button" variant="ghost" onClick={onClear}>
                        Reseteaza
                    </Button>
                    <Button
                        type="button"
                        onClick={() => {
                            onApply();
                            onOpenChange(false);
                        }}
                    >
                        Aplica filtrele
                    </Button>
                </SheetFooter>
            </SheetContent>
        </Sheet>
    );
}