import { useI18n } from '@solid-primitives/i18n';
import {
  FormControlLabel,
  Grid,
  Typography,
  Switch,
  FormGroup,
  RadioGroup,
  Radio,
  Divider,
  FormControl,
  FormLabel,
} 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';

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 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 [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 (
    <Grid container spacing={2}>
      <Grid item xs={12}>
        <Typography variant='subtitle1'>
          {t('file')}
          {gpxFile.name}
        </Typography>
      </Grid>
      <Show when={statsAndGpx() !== undefined}>
        <Grid item xs={12}>
          <Typography variant='body1'>
            {t('gpxStats', statsAndGpx().stats)}{' '}
            {statsAndGpx()?.stats.startTime
              ? t('gpxStartTime', statsAndGpx().stats)
              : t('gpxNoStartTime')}
          </Typography>
        </Grid>
        <Show when={statsAndGpx().stats.trkMaybeRte}>
          <Grid item xs={12}>
            <Typography variant='body1'>{t('trkMaybeRte')}</Typography>
          </Grid>
        </Show>
        <Show when={statsAndGpx().stats.nbTrks > 0}>
          <Grid item xs={12}>
            <FormControl>
              <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>
          </Grid>
        </Show>
      </Show>
    </Grid>
  );
};

export default GpxImportSingleFile;