import { Component } 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';

const GpxImport: Component = () => {
  const onChangeHandler = (event: any) => {
    console.log({
      caller: 'GpxImport / On change handler',
      files: 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
      );
    }
  };

  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>
    </>
  );
};

export default GpxImport;