import { Component } from 'solid-js';
import { peekCachedSignal } from '../../workers/cached-signals';
import Tree from '../tree';
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={undefined}
    />
  );
};

export default GpxViewer;