import { Field, FieldLabel } from '@/components/ui/field';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    InputGroupText,
} from '@/components/ui/input-group';
import type {
    ServicioBasicoData,
    ServiciosBasicosData,
} from '@/generated/types';
import { ToggleChoice } from '../components/ToggleChoice';
import {
    ACOM_SERVICIO_LABELS,
    SERVICIO_BASICO_LABELS,
    type ServicioBasicoKey,
} from '../lib/enum-labels';
import { useSectionForm } from '../lib/section-form-context';

const KEYS = Object.keys(SERVICIO_BASICO_LABELS) as ServicioBasicoKey[];

const SUFFIX_BY_KEY: Partial<Record<ServicioBasicoKey, string>> = {
    aseo: 'vec/sem',
};

const ACOM_OPTIONS = [
    { value: 'si' as const, label: ACOM_SERVICIO_LABELS.si },
    { value: 'no' as const, label: ACOM_SERVICIO_LABELS.no },
];

export function ServiciosBasicos() {
    const { data, setData } = useSectionForm<ServiciosBasicosData>();

    const updateServicio = (
        key: ServicioBasicoKey,
        patch: Partial<ServicioBasicoData>,
    ) => {
        setData(key, { ...data[key], ...patch });
    };

    return (
        <Field>
            <FieldLabel>Servicios básicos</FieldLabel>
            <div className="overflow-hidden rounded-lg border">
                {KEYS.map((key, index) => {
                    const servicio = data[key];
                    return (
                        <div
                            key={key}
                            className={
                                'grid gap-3 p-4 sm:grid-cols-[200px_minmax(0,1fr)_minmax(0,160px)] sm:items-center' +
                                (index < KEYS.length - 1
                                    ? ' border-b border-border'
                                    : '')
                            }
                        >
                            <span className="text-sm font-medium text-foreground">
                                {SERVICIO_BASICO_LABELS[key]}
                            </span>
                            <ToggleChoice
                                value={servicio.acom}
                                options={ACOM_OPTIONS}
                                onChange={(acom) =>
                                    updateServicio(key, { acom })
                                }
                                ariaLabel={`Acometida municipal de ${SERVICIO_BASICO_LABELS[key]}`}
                            />
                            <InputGroup>
                                <InputGroupInput
                                    type="number"
                                    min={0}
                                    value={servicio.medicion ?? ''}
                                    onChange={(e) => {
                                        const v = e.target.value;
                                        updateServicio(key, {
                                            medicion:
                                                v === ''
                                                    ? null
                                                    : Number(v),
                                        });
                                    }}
                                    placeholder="Medición"
                                    disabled={!servicio.acom}
                                />
                                {SUFFIX_BY_KEY[key] && (
                                    <InputGroupAddon align="inline-end">
                                        <InputGroupText>
                                            {SUFFIX_BY_KEY[key]}
                                        </InputGroupText>
                                    </InputGroupAddon>
                                )}
                            </InputGroup>
                        </div>
                    );
                })}
            </div>
        </Field>
    );
}