import { useI18n } from '@solid-primitives/i18n';
import {
  Typography,
  Card,
  CardContent,
  CardActions,
  Button,
  Box,
  LinearProgress,
  CircularProgress,
} from '@suid/material';
import { Component, createEffect, createSignal, Show } from 'solid-js';
import { findStartTime } from '../../lib/gpx';
import GPX from '../../lib/gpx-parser-builder/src/gpx';
import GpxChooser from '../gpx-chooser';
import { currentGpxId } from '../gpx-dialog';

interface Props {
  gpxFile: File;
}

interface StatsAndGpx {
  gpx: Gpx;
  stats: any;
}

const analyzeGpx = (gpx: Gpx | undefined) => {
  if (gpx === undefined) {
    return {};
  }
  const stats = {
    creator: gpx.$.creator,
    nbWpts: gpx.wpt ? gpx.wpt?.length : 0,
    nbRtes: gpx.rte ? gpx.rte?.length : 0,
    nbTrks: gpx.trk ? gpx.trk?.length : 0,
    trkMaybeRte:
      gpx.trk &&
      gpx.trk[0].trkseg &&
      gpx.trk[0].trkseg[0] &&
      gpx.trk[0].trkseg[0].trkpt &&
      !gpx.trk[0].trkseg[0].trkpt[0].time,
    startTime: findStartTime(gpx),
  };

  return stats;
};

const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
  const [t] = useI18n();
  const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
  const [state, setState] = createSignal('init');
  const [gpxId, setGpxId] = createSignal<string>('');
  createEffect(() => {
    setGpxId(currentGpxId());
  });

  const gpxReader = new FileReader();
  gpxReader.readAsText(gpxFile);

  gpxReader.addEventListener(
    'load',
    async () => {
      // this will then display a text gpxfile
      console.log({
        caller: 'GpxImportSingleFile / XML',
        gpxFile,
        result: gpxReader.result,
      });
      const gpx = GPX.parse(gpxReader.result);
      console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile, gpx });
      setStatsAndGpx({ gpx, stats: analyzeGpx(gpx) });
      //   if (gpx) {
      //     const startTime = new Date(findStartTime(gpx)!);
      //   }
    },
    false
  );

  const doImport = () => {
    setState('importing');
  };

  const [selectedTrkTransform, setSelectedTrkTransform] = createSignal(
    'importNonTimedTrksAsRtes'
  );

  const handleTrkTransformChange = (event: any) => {
    setSelectedTrkTransform(event.target.value);
  };

  const controlTrkTransformProps = (item: string) => ({
    checked: selectedTrkTransform() === item,
    onChange: handleTrkTransformChange,
    value: item,
    name: 'trkTransform',
    label: t(item),
    inputProps: { 'aria-label': item },
  });

  return (
    <Card raised>
      <CardContent>
        <Typography variant='h6'>
          {t('file')}
          {gpxFile.name}
        </Typography>
      </CardContent>
      <CardContent>
        <Show when={statsAndGpx() !== undefined}>
          <Typography variant='body1'>
            {t('gpxStats', statsAndGpx().stats)}{' '}
            {statsAndGpx()?.stats.startTime
              ? t('gpxStartTime', statsAndGpx().stats)
              : t('gpxNoStartTime')}
          </Typography>
          <Show when={statsAndGpx().stats.trkMaybeRte}>
            <Typography variant='body1'>{t('trkMaybeRte')}</Typography>
          </Show>
          {/* <Show when={statsAndGpx().stats.nbTrks > 0}>
            <FormControl fullWidth>
              <FormLabel>{t('importTrk')}</FormLabel>
              <RadioGroup>
                <FormControlLabel
                  control={<Radio color='success' />}
                  {...controlTrkTransformProps('importNonTimedTrksAsRtes')}
                />
                <FormControlLabel
                  control={<Radio color='secondary' />}
                  {...controlTrkTransformProps('importAllTrksAsRtes')}
                />
                <FormControlLabel
                  control={<Radio color='error' />}
                  {...controlTrkTransformProps('importTrksAsTrks')}
                />
              </RadioGroup>
            </FormControl>
          </Show> */}
          <Show when={state() === 'importing'}>
            <LinearProgress />
          </Show>
          <CardActions>
            <GpxChooser gpxId={gpxId} setGpxId={setGpxId} disabled={state() != 'init'} />
            <Button
              variant='contained'
              disabled={state() != 'init'}
              onClick={doImport}
            >
              {t('import')}
            </Button>
          </CardActions>
        </Show>
      </CardContent>
    </Card>
  );
};

export default GpxImportSingleFile;