import { Component } from 'solid-js';
import { peekCachedSignal } from '../../workers/cached-signals';
import Tree from '../tree';
import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
import { useI18n } from '@solid-primitives/i18n';
import { getFormatedLength } from '../../lib/ol';
import DisplayOrGetAddress from '../display-or-get-address';
import { LineString } from 'ol/geom';

interface Props {
  trksegId: string;
}

const TrksegViewer: Component<Props> = ({ trksegId }) => {
  const [t, { add, locale, dict }] = useI18n();

  const trkseg = peekCachedSignal({ id: trksegId, action: 'getTrkseg' });
  console.log({ caller: 'TrksegViewer', trksegId, trkseg: trkseg() });

  const lineString = new LineString(
    trkseg().trkpt.map((trkpt: any) => [trkpt.$.lon, trkpt.$.lat])
  );

  const firstTrkpt = () => trkseg().trkpt.at(0);
  const lastTrkpt = () => trkseg().trkpt.at(-1);

  const title = () => {
    return firstTrkpt().time;
  };

  return (
    <Tree
      title={
        <>
          <span>
            <TrkIcon fill='white' width='16' height='16' /> {title()}
          </span>
        </>
      }
      content={
        <>
          <div>
            {getFormatedLength(lineString)} {t('from')}{' '}
            <DisplayOrGetAddress
              target={firstTrkpt}
              putAction='putTrkpt'
              putParamName='trkpt'
            />{' '}
            {t('to')}{' '}
            <DisplayOrGetAddress
              target={lastTrkpt}
              putAction='putTrkpt'
              putParamName='trkpt'
            />
          </div>
        </>
      }
      subTree={undefined}
    />
  );
};

export default TrksegViewer;