dyomedea/src/components/gpx-import/GpxImportSingleFile.tsx

import { useI18n } from '@solid-primitives/i18n';
import {
  Typography,
  Card,
  CardContent,
  CardActions,
  Button,
  Box,
  LinearProgress,
  CircularProgress,
} from '@suid/material';
import { Component, createEffect, createSignal, Show } from 'solid-js';
import { findStartTime } from '../../lib/gpx';
import GPX from '../../lib/gpx-parser-builder/src/gpx';
import dispatch from '../../workers/dispatcher-main';
import GpxChooser from '../gpx-chooser';
import { currentGpxId } from '../gpx-dialog';
import {
  Filesystem as CapacitorFileSystem,
  Encoding,
} from '@capacitor/filesystem';

interface Props {
  gpxFile: File;
}

interface StatsAndGpx {
  gpx: Gpx;
  stats: any;
}

const analyzeGpx = (gpx: Gpx | undefined) => {
  if (gpx === undefined) {
    return {};
  }
  const stats = {
    creator: gpx.$.creator,
    nbWpts: gpx.wpt ? gpx.wpt?.length : 0,
    nbRtes: gpx.rte ? gpx.rte?.length : 0,
    nbTrks: gpx.trk ? gpx.trk?.length : 0,
    trkMaybeRte:
      gpx.trk &&
      gpx.trk[0].trkseg &&
      gpx.trk[0].trkseg[0] &&
      gpx.trk[0].trkseg[0].trkpt &&
      !gpx.trk[0].trkseg[0].trkpt[0].time,
    startTime: findStartTime(gpx),
  };

  return stats;
};

const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
  const [t] = useI18n();
  const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
  const [state, setState] = createSignal('init');
  const [gpxId, setGpxId] = createSignal<string>('');
  createEffect(() => {
    setGpxId(currentGpxId());
  });

  const parseGpx = (content: string) => {
    const gpx = GPX.parse(content);
    console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile, gpx });
    setStatsAndGpx({ gpx, stats: analyzeGpx(gpx) });
  };

  if (typeof gpxFile === 'string') {
    CapacitorFileSystem.requestPermissions().then((permissionStatus) => {
      console.log({
        caller: 'GpxImportSingleFile / content',
        permissionStatus,
      });
    });
    CapacitorFileSystem.readFile({
      path: gpxFile,
      encoding: Encoding.UTF8,
    }).then((content) => {
      console.log({
        caller: 'GpxImportSingleFile / content',
        gpxFile,
        content,
      });
      parseGpx(content.data);
    });
  } else {
    const gpxReader = new FileReader();
    gpxReader.readAsText(gpxFile);
    gpxReader.addEventListener(
      'load',
      async () => {
        // this will then display a text gpxfile
        console.log({
          caller: 'GpxImportSingleFile / XML',
          gpxFile,
          result: gpxReader.result,
        });
        parseGpx(gpxReader.result);
      },
      false
    );
  }
  const doImport = async () => {
    setState('importing');
    //       console.log({ caller: 'GpxImport / JSON', file, gpx });
    //       if (gpx) {
    //         const startTime = new Date(findStartTime(gpx)!);
    await dispatch({
      action: 'pruneAndSaveImportedGpx',
      params: {
        id: gpxId(),
        gpx: statsAndGpx()?.gpx,
        tech:
          typeof gpxFile === 'string'
            ? {
                 importDate: new Date().toISOString(),
                uri: gpxFile,
                 }
            : {
                lastModified: new Date(gpxFile.lastModified).toISOString(),
                importDate: new Date().toISOString(),
                name: gpxFile.name,
                size: gpxFile.size,
                type: gpxFile.type,
              },
      },
    });
    console.log({
      caller: 'GpxImport / JSON / done',
      gpxFile,
      gpx: statsAndGpx()?.gpx,
    });
    setState('done');

    //       } else {
    //         console.error({
    //           message: "can't parse GPX file",
    //           file,
    //           xml: fileReader.result,
    //         });
    //       }
    //       // TODO: error handling
    //     },
    //     false
    //   );
    // }
  };

  const [selectedTrkTransform, setSelectedTrkTransform] = createSignal(
    'importNonTimedTrksAsRtes'
  );

  const handleTrkTransformChange = (event: any) => {
    setSelectedTrkTransform(event.target.value);
  };

  const controlTrkTransformProps = (item: string) => ({
    checked: selectedTrkTransform() === item,
    onChange: handleTrkTransformChange,
    value: item,
    name: 'trkTransform',
    label: t(item),
    inputProps: { 'aria-label': item },
  });

  return (
    <Card raised>
      <CardContent>
        <Typography variant='h6'>
          {t('file')}
          {gpxFile.name}
        </Typography>
      </CardContent>
      <CardContent>
        <Show when={statsAndGpx() !== undefined}>
          <Typography variant='body1'>
            {t('gpxStats', statsAndGpx().stats)}{' '}
            {statsAndGpx()?.stats.startTime
              ? t('gpxStartTime', statsAndGpx().stats)
              : t('gpxNoStartTime')}
          </Typography>
          <Show when={statsAndGpx().stats.trkMaybeRte}>
            <Typography variant='body1'>{t('trkMaybeRte')}</Typography>
          </Show>
          <Show when={state() === 'importing'}>
            <LinearProgress />
          </Show>
          <CardActions>
            <GpxChooser
              gpxId={gpxId}
              setGpxId={setGpxId}
              disabled={state() != 'init'}
            />
            <Button
              variant='contained'
              disabled={state() != 'init'}
              onClick={doImport}
            >
              {t('import')}
            </Button>
          </CardActions>
        </Show>
      </CardContent>
    </Card>
  );
};

export default GpxImportSingleFile;