carrramba-encore-rate/frontend/src/stopsSearchMenu/stopPanel.tsx

import { createResource, For, JSX, ParentComponent, Show, useContext, VoidComponent } from 'solid-js';

import { Stop } from '../types';
import { renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from '../utils';
import { AppContextContext, AppContextStore } from "../appContext";
import { BusinessDataContext, BusinessDataStore } from "../businessData";
import { SearchContext, SearchStore } from "./searchStore";


import "./stopPanel.scss";


const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
    const fontSize: number = 40;

    const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
    if (businessDataStore === undefined)
        return <div />;

    const { getLine } = businessDataStore;

    const fetchLinesRepr = async (lineIds: string[]): Promise<JSX.Element[]> => {
        const reprs = [];
        for (const lineId of lineIds) {
            const line = await getLine(lineId);
            if (line !== undefined) {
                reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
                reprs.push(renderLinePicto(line));
            }
        }
        return reprs;
    }

    const [lineReprs] = createResource<JSX.Element[], string[]>(props.stop.lines, fetchLinesRepr);

    return <div class="stop">
        <svg class="name" viewBox={`0 0 215 ${fontSize}`}>
            <text
                x="100%" y="55%"
                dominant-baseline="middle" text-anchor="end"
                font-size={fontSize}>
                {props.stop.name}
            </text>
        </svg>
        <For each={lineReprs()}>{(line: JSX.Element) => line}</For>
    </div>;
}


type ByTransportModeReprs = {
    mode: JSX.Element | undefined;
    lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
}


const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
    const fontSize: number = 10;

    const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
    const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
    const searchStore: SearchStore | undefined = useContext(SearchContext);

    if (businessDataStore === undefined || appContextStore === undefined || searchStore === undefined)
        return <div />;

    const { getLine } = businessDataStore;
    const { setDisplayedStops } = appContextStore;
    const { setHighlightedStop, resetHighlightedStop } = searchStore;


    const fetchLinesRepr = async (stop: Stop): Promise<JSX.Element> => {
        const lineIds = new Set(stop.lines);
        const stops = stop.stops;
        for (const stop of stops) {
            stop.lines.forEach(lineIds.add, lineIds);
        }

        const byModeReprs: Record<string, ByTransportModeReprs> = {};
        for (const lineId of lineIds) {
            const line = await getLine(lineId);
            if (line !== undefined) {
                if (!(line.transportMode in byModeReprs)) {
                    byModeReprs[line.transportMode] = {
                        mode: <div class="transportMode"> {renderLineTransportMode(line)}</div>,
                        lines: {}
                    };
                }
                byModeReprs[line.transportMode].lines[line.shortName] = renderLinePicto(line);
            }
        }

        const sortedTransportModes = Object.keys(byModeReprs).sort((x, y) => TransportModeWeights[x] < TransportModeWeights[y] ? 1 : -1);

        return <div class="lineRepr">
            <For each={sortedTransportModes}>
                {(transportMode) => {
                    const reprs = byModeReprs[transportMode];
                    const lineNames = Object.keys(reprs.lines).sort((x, y) => x.localeCompare(y));
                    return <>
                        {reprs.mode}
                        <div class="linesRepresentationMatrix">
                            <For each={lineNames}>{(lineName) => reprs.lines[lineName]}</For>
                        </div>
                    </>;
                }}</For>
        </div>;
    }

    const [lineReprs] = createResource(props.stop, fetchLinesRepr);

    return <div
        class="stop"
        onClick={() => setDisplayedStops([props.stop])}
        onMouseEnter={() => setHighlightedStop(props.stop)}
        onMouseLeave={resetHighlightedStop}
    >
        <div class="name">
            <ScrollingText height={fontSize} width={100} content={props.stop.name} />
        </div>
        {lineReprs()}
    </div>;
}

export const StopsPanel: ParentComponent<{ stops: Stop[], show: boolean }> = (props) => {

    return <div classList={{ "stopPanel": true, "displayed": props.show }}>
        <For each={props.stops.sort((x, y) => x.name.localeCompare(y.name))}>
            {(stop) => {
                return <Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
                    <StopAreaRepr stop={stop} />
                </Show>;
            }}</For>
    </div>;
}