import { show as mediaShowRoute } from '@/actions/Modules/FichaInventario/Http/Controllers/MediaController';
import { MediaGallery } from '@/components/media/MediaGallery';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import type {
    Emplazamiento,
    EntornoUrbanoData,
    TramaUrbana,
} from '@/generated/types';
import { CheckboxCategory } from '../../components/CheckboxCategory';
import { EnumRadioCard } from '../../components/EnumRadioCard';
import {
    CONDICION_ESPACIO_PUBLICO_LABELS,
    type CondicionEspacioPublicoKey,
    EMPLAZAMIENTO_LABELS,
    FRENTE_VIA_LABELS,
    type FrenteViaKey,
    MATERIAL_VIA_LABELS,
    type MaterialViaKey,
    TRAMA_URBANA_LABELS,
} from '../../lib/enum-labels';
import { useSectionForm } from '../../lib/section-form-context';
import type { SeccionProps } from '../index';
import { HitosTable } from './hitos-table';
import { TipologiaCard } from './tipologia-card';

export function EntornoUrbano({ fichaId }: SeccionProps) {
    const { data, setData } = useSectionForm<EntornoUrbanoData>();
    const imagenes = data.imagenes ?? [];

    return (
        <div className="flex flex-col gap-6">
            <div className="grid gap-4 md:grid-cols-2">
                <EnumRadioCard<TramaUrbana>
                    title="Trama Urbana"
                    labels={TRAMA_URBANA_LABELS}
                    value={data.trama_urbana}
                    onChange={(value) => setData('trama_urbana', value)}
                />
                <EnumRadioCard<Emplazamiento>
                    title="Emplazamiento en Manzana"
                    labels={EMPLAZAMIENTO_LABELS}
                    value={data.emplazamiento}
                    onChange={(value) => setData('emplazamiento', value)}
                />
                <CheckboxCategory<FrenteViaKey>
                    title="Frente a Vía Pública"
                    labels={FRENTE_VIA_LABELS}
                    values={data.frentes}
                    onChange={(key, value) =>
                        setData('frentes', { ...data.frentes, [key]: value })
                    }
                />
                <CheckboxCategory<MaterialViaKey>
                    title="Material de Vías"
                    labels={MATERIAL_VIA_LABELS}
                    values={data.materiales_via}
                    onChange={(key, value) =>
                        setData('materiales_via', {
                            ...data.materiales_via,
                            [key]: value,
                        })
                    }
                />
            </div>

            <CheckboxCategory<CondicionEspacioPublicoKey>
                title="Condiciones del Espacio Público"
                labels={CONDICION_ESPACIO_PUBLICO_LABELS}
                values={data.condiciones}
                onChange={(key, value) =>
                    setData('condiciones', {
                        ...data.condiciones,
                        [key]: value,
                    })
                }
            />

            <TipologiaCard
                value={data.tipologia}
                onChange={(value) => setData('tipologia', value)}
            />

            <Card>
                <CardHeader>
                    <CardTitle>Hitos Colindantes Directos</CardTitle>
                </CardHeader>
                <CardContent>
                    <HitosTable
                        value={data.hitos}
                        onChange={(value) => setData('hitos', value)}
                    />
                </CardContent>
            </Card>

            <div className="grid gap-4 md:grid-cols-2">
                <Field>
                    <FieldLabel>Orientación de Fachada</FieldLabel>
                    <Input
                        value={data.orientacion ?? ''}
                        onChange={(e) =>
                            setData('orientacion', e.target.value || null)
                        }
                    />
                </Field>
                <Field>
                    <FieldLabel>Descripción de Fachadas</FieldLabel>
                    <Textarea
                        value={data.fachadas ?? ''}
                        onChange={(e) =>
                            setData('fachadas', e.target.value || null)
                        }
                        rows={5}
                    />
                </Field>
            </div>

            <Field>
                <FieldLabel>
                    Fotografías del Entorno Urbano
                    <span className="ml-0.5 text-destructive">*</span>
                </FieldLabel>
                <MediaGallery
                    fichaId={fichaId}
                    collection="entorno_urbano"
                    label="fotografías del entorno urbano"
                    hasMetadata={false}
                    value={imagenes
                        .filter((image) => image.id)
                        .map((image) => ({
                            id: image.id as string,
                            previewUrl: mediaShowRoute.url({
                                media: image.id as string,
                            }),
                            mimeType: 'image/jpeg',
                        }))}
                    minItems={1}
                    onChange={(items) =>
                        setData(
                            'imagenes',
                            items.map((item) => ({
                                id: item.id,
                                caption: null,
                            })),
                        )
                    }
                />
            </Field>
        </div>
    );
}