import {
  Component,
  createEffect,
  createResource,
  createSignal,
  onCleanup,
} from 'solid-js';

import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import { setBranch, tree } from '../map';
import { Feature } from 'ol';
import { useI18n } from '@solid-primitives/i18n';
import Dialog from '../dialog';
import { Box, Button, Grid, Stack, TextField } from '@suid/material';

interface Props {
  wptId: string;
  vectorSource: VectorSource;
}

enum Mode {
  CLOSED,
  EDIT,
}

export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
  const [t, { add, locale, dict }] = useI18n();

  const [wpt, setWpt] = createSignal<Wpt>();
  const [dispatchId, setDispatchId] = createSignal<number>(-1);

  const getTitle = () => {
    if (wpt()?.name) {
      return `${wpt()?.name} (${t('wpt')})`;
    }
    return t('wpt');
  };

  const wptCallBack = (error: any, result: any, id?: number) => {
    if (error) {
      console.error({ caller: 'wptCallBack', error });
    } else {
      console.log({ caller: 'wptCallBack', result });
      setWpt(result);
    }
    if (id) {
      setDispatchId(id);
    }
  };

  dispatch(
    {
      action: 'getAndWatch',
      params: {
        id: wptId,
        method: 'getWpt',
      },
    },
    wptCallBack,
    true
  );

  onCleanup(() => {
    dispatch({
      action: 'cancelWatch',
      params: {
        id: wptId,
        method: 'getWpt',
      },
    });
    cancelDispatch(dispatchId());
  });

  const [mode, setMode] = createSignal<Mode>(Mode.CLOSED);

  const edit = () => {
    setMode(Mode.EDIT);
  };

  createEffect(() => {
    console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() });

    if (wpt() && !tree[wptId]) {
      let geo: any = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [wpt()?.$.lon, wpt()?.$.lat],
            },
            properties: { type: 'wpt', ...wpt(), id: wptId, getTitle, edit },
          },
        ],
      };

      const features = new GeoJSON().readFeatures(geo);
      console.log({ caller: 'Wpt', features });
      vectorSource.addFeatures(features);
      setBranch(wptId, { features, updateHandler });
    }
  });

  const updateHandler = (feature: Feature) => {
    console.log({
      caller: 'Wpt / updateHandler / clicked',
      feature,
    });
  };

  const closeHandler = () => {
    setMode(Mode.CLOSED);
  };

  return (
    <Dialog
      open={mode() === Mode.EDIT}
      title={getTitle()}
      closeHandler={closeHandler}
    >
      <Box sx={{ flexGrow: 1, padding: '10px' }}>
        <div>
          <TextField
            required
            id='name'
            label={t('name')}
            defaultValue={wpt()?.name}
          />
          <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
            <Button variant='outlined' color='secondary' onClick={closeHandler}>
              {t('cancel')}
            </Button>
            <Button variant='contained' color='success'>
              {t('save')}
            </Button>
          </Stack>
        </div>
      </Box>
    </Dialog>
  );
};

export default Wpt;