import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    InputGroupText,
} from '@/components/ui/input-group';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import type { UsoFuncionalData } from '@/generated/types';
import { TIPO_USO_LABELS, type TipoUsoKey } from '../lib/enum-labels';
import { useSectionForm } from '../lib/section-form-context';

const TIPO_USO_KEYS = Object.keys(TIPO_USO_LABELS) as TipoUsoKey[];

export function UsoFuncional() {
    const { data, setData } = useSectionForm<UsoFuncionalData>();

    const updateUso = (
        key: TipoUsoKey,
        field: 'original' | 'actual',
        value: number | null,
    ) => {
        setData(key, { ...data[key], [field]: value });
    };

    return (
        <div className="overflow-hidden rounded-lg border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Uso</TableHead>
                        <TableHead className="w-40">
                            Original
                            <span className="ml-0.5 text-destructive">*</span>
                        </TableHead>
                        <TableHead className="w-40">
                            Actual
                            <span className="ml-0.5 text-destructive">*</span>
                        </TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {TIPO_USO_KEYS.map((key) => {
                        const uso = data[key];

                        return (
                            <TableRow key={key}>
                                <TableCell className="font-medium">
                                    {TIPO_USO_LABELS[key]}
                                </TableCell>
                                <TableCell>
                                    <PercentInput
                                        value={uso.original}
                                        onChange={(value) =>
                                            updateUso(key, 'original', value)
                                        }
                                    />
                                </TableCell>
                                <TableCell>
                                    <PercentInput
                                        value={uso.actual}
                                        onChange={(value) =>
                                            updateUso(key, 'actual', value)
                                        }
                                    />
                                </TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </div>
    );
}

function PercentInput({
    value,
    onChange,
}: {
    value: number | null;
    onChange: (value: number | null) => void;
}) {
    return (
        <InputGroup>
            <InputGroupInput
                type="number"
                min={0}
                max={100}
                value={value ?? ''}
                onChange={(event) => {
                    const nextValue = event.target.value;
                    onChange(nextValue === '' ? null : Number(nextValue));
                }}
                placeholder="0"
            />
            <InputGroupAddon align="inline-end">
                <InputGroupText>%</InputGroupText>
            </InputGroupAddon>
        </InputGroup>
    );
}