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';
import { refetchGpxList } from '../all-gpxes';

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(fileReader.result);
        const gpx = GPX.parse(fileReader.result);
        console.log(`gpx: ${JSON.stringify(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,
            },
          },
        });
        refetchGpxList();
      },
      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;