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

import { Component, createSignal, For, Show } from 'solid-js';

import CloudUploadIcon from '@suid/icons-material/CloudUpload';

// @ts-ignore
import GPX from '../../lib/gpx-parser-builder/src/gpx';

import css from './GpxImport.module.css';
import { findStartTime } from '../../lib/gpx';
import dispatch from '../../workers/dispatcher-main';
import { intToGpxId } from '../../lib/ids';
import Dialog from '../dialog';
import { useI18n } from '@solid-primitives/i18n';
import { Box, Grid, Typography } from '@suid/material';
import GpxImportSingleFile from './GpxImportSingleFile';

const GpxImport: Component = () => {
  const [filesToImport, setFilesToImport] = createSignal<FileList>();

  const [t] = useI18n();

  const onChangeHandler = (event: any) => {
    console.log({
      caller: 'GpxImport / On change handler',
      files: event.target.files,
    });
    setFilesToImport(event.target.files);
    // for (const file of event.target.files) {
    //   const fileReader = new FileReader();
    //   fileReader.readAsText(file);

    //   fileReader.addEventListener(
    //     'load',
    //     async () => {
    //       // this will then display a text file
    //       console.log({
    //         caller: 'GpxImport / XML',
    //         file,
    //         result: fileReader.result,
    //       });
    //       const gpx = GPX.parse(fileReader.result);
    //       console.log({ caller: 'GpxImport / JSON', file, gpx });
    //       if (gpx) {
    //         const startTime = new Date(findStartTime(gpx)!);
    //         await dispatch({
    //           action: 'pruneAndSaveImportedGpx',
    //           params: {
    //             id: { gpx: intToGpxId(startTime.valueOf()) },
    //             gpx: gpx,
    //             tech: {
    //               lastModified: new Date(file.lastModified).toISOString(),
    //               importDate: new Date().toISOString(),
    //               name: file.name,
    //               size: file.size,
    //               type: file.type,
    //             },
    //           },
    //         });
    //         console.log({ caller: 'GpxImport / JSON / done', file, gpx });
    //       } else {
    //         console.error({
    //           message: "can't parse GPX file",
    //           file,
    //           xml: fileReader.result,
    //         });
    //       }
    //       // TODO: error handling
    //     },
    //     false
    //   );
    // }
  };

  const handleClose = (event: any, reason?: string) => {
    console.log({
      caller: 'GpxImport / handleClose',
      event,
      reason,
    });
    if (reason === undefined) {
      setFilesToImport(undefined);
    }
  };

  return (
    <>
      <div class={css.container}>
        <label for='gpx-import' class={css.label}>
          <CloudUploadIcon />
        </label>
        <input
          type='file'
          id='gpx-import'
          class={css.inputFile}
          accept='.gpx'
          multiple={true}
          onChange={onChangeHandler}
        />
      </div>
      <Dialog
        open={filesToImport() !== undefined}
        title={t('gpxImport')}
        closeHandler={handleClose}
      >
        <Box
          sx={{
            width: '100%',
          }}
        >
          <For each={filesToImport()}>
            {(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
          </For>
        </Box>
      </Dialog>
    </>
  );
};

export default GpxImport;