import { Coordinate } from 'ol/coordinate';
import { Component, createSignal } from 'solid-js';
import { useNavigate } from '@solidjs/router';

import SearchIcon from '@suid/icons-material/Search';
import { useI18n } from '@solid-primitives/i18n';
import proj4 from 'proj4';

import style from './Finder.module.css';
import { Box, IconButton, TextField } from '@suid/material';
import Dialog from '../dialog';
import { getState } from '../map';

interface Props {}

const Finder: Component<Props> = (props) => {
  const [open, setOpen] = createSignal(false);
  const [searchString, setSearchString] = createSignal('');
  const navigate = useNavigate();
  const [t, { add, locale, dict }] = useI18n();

  const searchStringChangeHandler = (event: any) => {
    setSearchString(event.target.value);
  };

  const submitHandler = () => {
    let coordinates: Coordinate | undefined = undefined;
    const utmRegExp = /([0-6]?[0-9])\s*([C-X])\s*([0-9]+)\s*([0-9]+)/;
    const utmMatch = searchString().match(utmRegExp);
    if (!!utmMatch) {
      const utm = `+proj=utm +zone=${utmMatch[1]}`;
      coordinates = proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]);
    }
    console.log({
      caller: 'Finder / submitHandler',
      searchString: searchString(),
      isUtm: utmMatch,
      coordinates,
    });

    if (!!coordinates) {
      setOpen(false);
      navigate(
        `/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
          getState().rotation
        }`
      );
    }
  };

  return (
    <>
      <div class={style.control}>
        <IconButton
          onClick={() => {
            setOpen(true);
          }}
        >
          <SearchIcon />
        </IconButton>
      </div>
      <Dialog
        closeHandler={() => {
          setOpen(false);
        }}
        open={open()}
        title={t('search')}
      >
        <Box
          component='form'
          sx={{
            width: '100%',
            '& .MuiTextField-root': { m: 1, width: '100%' },
            paddingTop: '5px',
          }}
          noValidate
          autoComplete='off'
          onSubmit={submitHandler}
          method='dialog'
        >
          <TextField onChange={searchStringChangeHandler} />
        </Box>
      </Dialog>
    </>
  );
};

export default Finder;