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('On change handler');
    const file: File = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsText(file);

    fileReader.addEventListener(
      'load',
      () => {
        // this will then display a text file
        console.log({ caller: 'GpxImport / XML', result: fileReader.result });
        const gpx = GPX.parse(fileReader.result);
        console.log({ caller: 'GpxImport / JSON', gpx });
        if (gpx) {
          const startTime = new Date(findStartTime(gpx)!);
          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,
              },
            },
          });
        } else {
          console.error({
            message: "can't parse GPX 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'
          onChange={onChangeHandler}
        />
      </div>
    </>
  );
};

export default GpxImport;