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

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

// @ts-ignore

import css from './GpxImport.module.css';
import Dialog from '../dialog';
import { useI18n } from '@solid-primitives/i18n';
import { Box } 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);
  };

  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}
        fullScreen
      >
        <Box
          sx={{
            width: '100%',
          }}
        >
          <For each={filesToImport()}>
            {(gpxFile) => <GpxImportSingleFile gpxFile={gpxFile} />}
          </For>
        </Box>
      </Dialog>
    </>
  );
};

export default GpxImport;