import { IconButton } from '@/components/common/IconButton';
import type {
    DataTableFilterFieldOption,
    DataTableFilterOperator,
    DataTableFilterRule,
} from '@/components/data-table/types';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

type FilterRuleRowProps<TField extends string> = {
    rule: DataTableFilterRule<TField>;
    fields: DataTableFilterFieldOption<TField>[];
    onChange: (rule: DataTableFilterRule<TField>) => void;
    onRemove: () => void;
};

const operatorLabelMap: Record<DataTableFilterOperator, string> = {
    contains: 'Contine',
    equals: 'Egal cu',
    not_equals: 'Diferit de',
    starts_with: 'Incepe cu',
    ends_with: 'Se termina cu',
    is_true: 'Este adevarat',
    is_false: 'Este fals',
};

export function FilterRuleRow<TField extends string>({
    rule,
    fields,
    onChange,
    onRemove,
}: FilterRuleRowProps<TField>) {
    const fieldOption = fields.find((item) => item.value === rule.field) ?? fields[0];
    const availableOperators = fieldOption?.operators ?? [];
    const requiresValue = !['is_true', 'is_false'].includes(rule.operator);
    const showBooleanValueSelect = fieldOption?.type === 'boolean' && requiresValue;

    return (
        <div className="grid gap-2 rounded-md border p-3 md:grid-cols-[1.2fr_1fr_1fr_auto] md:items-center">
            <Select
                value={rule.field}
                onValueChange={(value) => {
                    const nextField = fields.find((item) => item.value === value);

                    if (!nextField) {
                        return;
                    }

                    onChange({
                        ...rule,
                        field: nextField.value,
                        operator: nextField.operators[0],
                        value: '',
                    });
                }}
            >
                <SelectTrigger>
                    <SelectValue placeholder="Camp" />
                </SelectTrigger>
                <SelectContent>
                    {fields.map((field) => (
                        <SelectItem key={field.value} value={field.value}>
                            {field.label}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>

            <Select
                value={rule.operator}
                onValueChange={(value) =>
                    onChange({
                        ...rule,
                        operator: value as DataTableFilterOperator,
                        value: ['is_true', 'is_false'].includes(value) ? '' : rule.value ?? '',
                    })
                }
            >
                <SelectTrigger>
                    <SelectValue placeholder="Operator" />
                </SelectTrigger>
                <SelectContent>
                    {availableOperators.map((operator) => (
                        <SelectItem key={operator} value={operator}>
                            {operatorLabelMap[operator]}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>

            {requiresValue ? (
                showBooleanValueSelect ? (
                    <Select
                        value={rule.value || 'true'}
                        onValueChange={(value) =>
                            onChange({
                                ...rule,
                                value,
                            })
                        }
                    >
                        <SelectTrigger>
                            <SelectValue placeholder="Valoare" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="true">Adevarat</SelectItem>
                            <SelectItem value="false">Fals</SelectItem>
                        </SelectContent>
                    </Select>
                ) : (
                    <Input
                        value={rule.value ?? ''}
                        onChange={(event) =>
                            onChange({
                                ...rule,
                                value: event.target.value,
                            })
                        }
                        placeholder="Valoare"
                    />
                )
            ) : (
                <div className="text-sm text-muted-foreground">Nu necesita valoare</div>
            )}

            <IconButton
                type="button"
                variant="text"
                color="danger"
                size="sm"
                onClick={onRemove}
                icon="solar:trash-bin-minimalistic-bold-duotone"
                aria-label="Elimină regulă"
            />
        </div>
    );
}