import { useParams } from 'react-router-dom';
import { useData, useDataPage } from '../API/common';
import { Institution, Profession, Specialty } from '../types/survey';
import ReactMarkdown from 'react-markdown';
import { LoadingData } from '../components/LoadingData';
import { useEffect, useMemo, useState } from 'react';
import { LoadingList } from '../components/LoadingList';



export function ProfessionPage() {
    const { professionId } = useParams<{ professionId: string }>();
    const profession = useData<Profession>('surveys', 'professions', professionId || 0);
    const specialties = useDataPage<Specialty>('surveys', 'specialties', { profession: professionId || 0 }, !!profession);

    const [institutionCache, setInstitutionCache] = useState<Map<number, Institution>>(new Map()); // Кеширование учебных заведений
    const institutionsToLoad = useMemo(() => {
        if (!specialties.items) return [];
        return specialties.items
            .map(specialty => specialty.institution)
            .filter(id => !institutionCache.has(id));
    }, [specialties.items, institutionCache]);

    useEffect(() => {
        if (institutionsToLoad.length > 0) {
            Promise.all(
                institutionsToLoad.map(id =>
                    useData<Institution>('surveys', 'institutions', id, true)
                )
            ).then(newInstitutions => {
                setInstitutionCache(prev => {
                    const newCache = new Map(prev);
                    newInstitutions.forEach(institution => institution && newCache.set(institution.id, institution));
                    return newCache;
                });
            });
        }
    }, [institutionsToLoad]);

    return (
        <div>
            <LoadingData data={profession}>
                <h1>{profession?.name}</h1>
                <div className="description">
                    <ReactMarkdown>{profession?.description || ''}</ReactMarkdown>
                </div>
                <div className="specialties-block">
                    <h2>Где можно обучиться</h2>
                    <LoadingList
                        data={specialties.items}
                        listElement={(specialty) => (
                            <SpecialtyBlock
                                key={specialty.id}
                                specialty={specialty as Specialty}
                                institution={institutionCache.get((specialty as Specialty).institution)}
                            />
                        )}
                    />
                </div>
            </LoadingData>
        </div>
    );
}

function SpecialtyBlock({
    specialty,
    institution,
}: {
    specialty: Specialty;
    institution: Institution | undefined;
}) {
    return (
        <div className="specialty-block">
            <h3>{specialty.name}</h3>
            <p>Учебное заведение: {institution?.name || 'Загрузка...'}</p>
        </div>
    );
}