import { Field, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field';
import type { AmenazasVulnerabilidadesData } from '@/generated/types';
import { ToggleChoice } from '../components/ToggleChoice';
import {
    AMENAZA_ANTROPICA_LABELS,
    AMENAZA_NATURAL_LABELS,
    type AmenazaAntropicaKey,
    type AmenazaNaturalKey,
    TIPO_AMENAZA_VULNERABILIDAD_LABELS,
} from '../lib/enum-labels';
import { useSectionForm } from '../lib/section-form-context';

const NATURAL_KEYS = Object.keys(
    AMENAZA_NATURAL_LABELS,
) as AmenazaNaturalKey[];

const ANTROPICA_KEYS = Object.keys(
    AMENAZA_ANTROPICA_LABELS,
) as AmenazaAntropicaKey[];

const TIPO_OPTIONS = [
    {
        value: 'a' as const,
        label: TIPO_AMENAZA_VULNERABILIDAD_LABELS.a,
    },
    {
        value: 'v' as const,
        label: TIPO_AMENAZA_VULNERABILIDAD_LABELS.v,
    },
];

export function AmenazasVulnerabilidades() {
    const { data, setData } = useSectionForm<AmenazasVulnerabilidadesData>();

    return (
        <FieldSet>
            <FieldLegend>Amenazas y vulnerabilidades</FieldLegend>

            <Field>
                <FieldLabel>Naturales</FieldLabel>
                <div className="overflow-hidden rounded-lg border">
                    {NATURAL_KEYS.map((key, index) => (
                        <div
                            key={key}
                            className={
                                'grid gap-3 p-4 sm:grid-cols-[200px_minmax(0,1fr)] sm:items-center' +
                                (index < NATURAL_KEYS.length - 1
                                    ? ' border-b border-border'
                                    : '')
                            }
                        >
                            <span className="text-sm font-medium text-foreground">
                                {AMENAZA_NATURAL_LABELS[key]}
                            </span>
                            <ToggleChoice
                                value={data.naturales[key]}
                                options={TIPO_OPTIONS}
                                onChange={(value) =>
                                    setData('naturales', {
                                        ...data.naturales,
                                        [key]: value,
                                    })
                                }
                                ariaLabel={`Tipo de ${AMENAZA_NATURAL_LABELS[key]}`}
                            />
                        </div>
                    ))}
                </div>
            </Field>

            <Field>
                <FieldLabel>Antrópicos</FieldLabel>
                <div className="overflow-hidden rounded-lg border">
                    {ANTROPICA_KEYS.map((key, index) => (
                        <div
                            key={key}
                            className={
                                'grid gap-3 p-4 sm:grid-cols-[200px_minmax(0,1fr)] sm:items-center' +
                                (index < ANTROPICA_KEYS.length - 1
                                    ? ' border-b border-border'
                                    : '')
                            }
                        >
                            <span className="text-sm font-medium text-foreground">
                                {AMENAZA_ANTROPICA_LABELS[key]}
                            </span>
                            <ToggleChoice
                                value={data.antropicas[key]}
                                options={TIPO_OPTIONS}
                                onChange={(value) =>
                                    setData('antropicas', {
                                        ...data.antropicas,
                                        [key]: value,
                                    })
                                }
                                ariaLabel={`Tipo de ${AMENAZA_ANTROPICA_LABELS[key]}`}
                            />
                        </div>
                    ))}
                </div>
            </Field>
        </FieldSet>
    );
}