import { Button, Input, Label, Textarea } from "@repo/shadcn-ui/components";
import { useFormContext } from "react-hook-form";
import { InvoiceFormData, InvoiceItemFormData } from '../../../schemas';

export function ItemRowEditor({
    row,
    index,
    onClose,
}: {
    row: InvoiceItemFormData
    index: number
    onClose: () => void
}) {
    // Editor simple reutilizando el mismo RHF
    const { register } = useFormContext<InvoiceFormData>();
    return (
        <div className="grid gap-3">
            <h3 className="text-base font-semibold">Edit line #{index + 1}</h3>
            <div>
                <Label htmlFor={`desc-${index}`}>Description</Label>
                <Textarea id={`desc-${index}`} rows={4} {...register(`items.${index}.description`)} />
            </div>
            <div className="grid grid-cols-3 gap-3">
                <div>
                    <Label htmlFor={`qty-${index}`}>Qty</Label>
                    <Input id={`qty-${index}`} type="number" step="1" {...register(`items.${index}.quantity`, { valueAsNumber: true })} />
                </div>
                <div>
                    <Label htmlFor={`unit-${index}`}>Unit</Label>
                    <Input id={`unit-${index}`} type="number" step="0.01" {...register(`items.${index}.unit_amount`, { valueAsNumber: true })} />
                </div>
                <div>
                    <Label htmlFor={`disc-${index}`}>Discount %</Label>
                    <Input id={`disc-${index}`} type="number" step="0.01" {...register(`items.${index}.discount_percentage`, { valueAsNumber: true })} />
                </div>
            </div>
            <div className="flex justify-end gap-2">
                <Button onClick={onClose}>OK</Button>
            </div>
        </div>
    );
}

