Begining to implement a GPX Dialog component

src/components/gpx-import/GpxImportSingleFile.tsx

@@ -1,6 +1,17 @@
 import { useI18n } from '@solid-primitives/i18n';
-import { Grid, Typography } from '@suid/material';
-import { Component, createSignal, Show } from 'solid-js';
+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';
 
@@ -8,6 +19,11 @@ interface Props {
   gpxFile: File;
 }
 
+interface StatsAndGpx {
+  gpx: Gpx;
+  stats: any;
+}
+
 const analyzeGpx = (gpx: Gpx | undefined) => {
   if (gpx === undefined) {
     return {};
@@ -17,13 +33,21 @@ const analyzeGpx = (gpx: Gpx | undefined) => {
     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 [gpx, setGpx] = createSignal<Gpx>();
+  const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
 
   const gpxReader = new FileReader();
   gpxReader.readAsText(gpxFile);
@@ -39,7 +63,7 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
       });
       const gpx = GPX.parse(gpxReader.result);
       console.log({ caller: 'GpxImportSingleFile / JSON', gpxFile, gpx });
-      setGpx(gpx);
+      setStatsAndGpx({ gpx, stats: analyzeGpx(gpx) });
       //   if (gpx) {
       //     const startTime = new Date(findStartTime(gpx)!);
       //   }
@@ -47,7 +71,22 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
     false
   );
 
-  const stats = analyzeGpx(gpx());
+  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}>
@@ -57,12 +96,41 @@ const GpxImportSingleFile: Component<Props> = ({ gpxFile }) => {
           {gpxFile.name}
         </Typography>
       </Grid>
-      <Show when={gpx() !== undefined}>
+      <Show when={statsAndGpx() !== undefined}>
         <Grid item xs={12}>
           <Typography variant='body1'>
-            {t('gpxStats', analyzeGpx(gpx()))}
+            {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>
   );