import { show as mediaShowRoute } from '@/actions/Modules/FichaInventario/Http/Controllers/MediaController';
import { MediaUploader } from '@/components/media/MediaUploader';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { useSectionForm } from '../lib/section-form-context';
import type { SeccionProps } from './index';

type PlanoUbicacionData = {
    id?: string | null;
};

export function PlanoUbicacion({ fichaId }: SeccionProps) {
    const { data, setData, errors } = useSectionForm<PlanoUbicacionData>();

    const value = data.id ? { id: data.id } : null;
    const previewUrl = data.id ? mediaShowRoute.url({ media: data.id }) : undefined;

    return (
        <div className="grid gap-4">
            <Field data-invalid={!!errors.id}>
                <FieldLabel>
                    Plano de ubicación
                    <span className="ml-0.5 text-destructive">*</span>
                </FieldLabel>
                <MediaUploader
                    fichaId={fichaId}
                    collection="plano_ubicacion"
                    value={value}
                    onChange={(v) => setData('id', v?.id ?? null)}
                    previewUrl={previewUrl}
                    label="plano de ubicación"
                />
                {errors.id && <FieldError>{errors.id}</FieldError>}
            </Field>
        </div>
    );
}