import { Component, For } from 'solid-js';
import { peekCachedSignal } from '../../workers/cached-signals';
import { RteViewer } from '../rte';
import Tree from '../tree';
import { WptViewer } from '../wpt';
import GpxIcon from './GpxIcon';

interface Props {
  gpxId: string;
  restrictToHierarchy?: any;
}

const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
  const gpx = peekCachedSignal({ id: gpxId, method: 'getGpx' });
  console.log({ caller: 'GpxViewer', gpxId, restrictToHierarchy, gpx: gpx() });
  const title = () => {
    return gpx().metadata.name;
  };
  return (
    <Tree
      title={
        <>
          <GpxIcon /> {title()}
        </>
      }
      content={undefined}
      subTree={
        <For
          each={Object.keys(restrictToHierarchy).filter((key: string) =>
            key.startsWith('gpx/')
          )}
        >
          {(key: string) => {
            const child = restrictToHierarchy[key];
            if (child.type === 'wpt') {
              return <WptViewer wptId={key} />;
            }
            if (child.type === 'rte') {
              return <RteViewer rteId={key} />;
            }
            return <></>;
          }}
        </For>
      }
    />
  );
};

export default GpxViewer;