import { Checkbox } from '@/components/ui/checkbox';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import type { ConfortHabitacionalData } from '@/generated/types';
import {
    AMBIENTE_LABELS,
    type AmbienteKey,
    AREA_COMUN_LABELS,
    type AreaKey,
} from '../lib/enum-labels';
import { useSectionForm } from '../lib/section-form-context';

const AREA_KEYS = Object.keys(AREA_COMUN_LABELS) as AreaKey[];
const AMBIENTE_KEYS = Object.keys(AMBIENTE_LABELS) as AmbienteKey[];

export function ConfortHabitacional() {
    const { data, setData } = useSectionForm<ConfortHabitacionalData>();
    const areasComunes = data.areas_comunes;
    const hacinamiento = data.hacinamiento;

    const updateArea = (key: AreaKey, value: boolean) => {
        setData('areas_comunes', { ...areasComunes, [key]: value });
    };

    const updateAmbiente = (key: AmbienteKey, value: number | null) => {
        setData('hacinamiento', { ...hacinamiento, [key]: value });
    };

    return (
        <div className="grid gap-8">
            <Field>
                <FieldLabel>Áreas comunes</FieldLabel>
                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    {AREA_KEYS.map((key) => (
                        <label
                            key={key}
                            className="flex items-center gap-3 rounded-lg border p-4 text-sm font-medium"
                        >
                            <Checkbox
                                checked={areasComunes[key]}
                                onCheckedChange={(value) =>
                                    updateArea(key, value === true)
                                }
                            />
                            {AREA_COMUN_LABELS[key]}
                        </label>
                    ))}
                </div>
            </Field>

            <Field>
                <FieldLabel>Hacinamiento</FieldLabel>
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {AMBIENTE_KEYS.map((key) => (
                        <label key={key} className="grid gap-2 text-sm">
                            <span className="font-medium text-muted-foreground">
                                {AMBIENTE_LABELS[key]}
                            </span>
                            <Input
                                type="number"
                                min={0}
                                value={hacinamiento[key] ?? ''}
                                onChange={(event) =>
                                    updateAmbiente(
                                        key,
                                        event.target.value === ''
                                            ? null
                                            : Number(event.target.value),
                                    )
                                }
                            />
                        </label>
                    ))}
                </div>
            </Field>
        </div>
    );
}