import {
  Box,
  Dialog,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
  Typography,
} from '@suid/material';
import { Feature } from 'ol';
import { Geometry } from 'ol/geom';
import { Component, createSignal, For } from 'solid-js';
import { unwrap } from 'solid-js/store';
import {
  I18nContext,
  createI18nContext,
  useI18n,
} from '@solid-primitives/i18n';
import CloseIcon from '@suid/icons-material/Close';
import { tree } from '../map';
import style from './Infos.module.css';
import { Paper, Stack } from '@suid/material';
import styled from '@suid/material/styles/styled';

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

const [open, setOpen] = createSignal(false);

let selectedFeatures: Feature[] = [];

export const clickHandler = (event: any) => {
  const pixel = [event.originalEvent.x, event.originalEvent.y];
  const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
  console.log({
    caller: '<Infos/> / clickHandler',
    event,
    features,
    tree: unwrap(tree),
  });
  selectedFeatures.map((feature) => feature.set('isSelected', false));
  selectedFeatures = features;
  features.map((feature: Feature<Geometry>) => {
    const id = feature.get('id');
    feature.set('isSelected', true);
    console.log({
      caller: '<Infos/> / clickHandler / feature',
      event,
      feature,
      id,
    });
    const branch = tree[id];
    if (branch?.updateHandler) branch.updateHandler(feature);
  });
  if (features.length > 0) {
    setOpen(true);
  }
};

const Infos: Component<{}> = (props) => {
  const [t, { add, locale, dict }] = useI18n();
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <Dialog
      onClose={handleClose}
      open={open()}
      class={style.dialog}
      PaperProps={{ sx: { minWidth: '300px' } }}
    >
      <DialogTitle class={style.title}>
        <Grid container spacing={2} alignItems='center'>
          <Grid item xs={11}>
            <div>{t('nearby')}</div>
          </Grid>
          <Grid item xs={1} class={style.close}>
            <IconButton onClick={handleClose}>
              <CloseIcon />
            </IconButton>
          </Grid>
        </Grid>
      </DialogTitle>
      <DialogContent>
        <Stack spacing={1} direction='column' alignItems='left'>
          <For each={selectedFeatures}>
            {(feature) => (
              <Item sx={{ width: '95%' }}>
                <Grid container spacing={2}  alignItems='left'>
                  <Grid item xs={11}>
                    {feature.get('name')
                      ? `${feature.get('name')} (${t(feature.get('type'))})`
                      : t(feature.get('type'))}
                  </Grid>
                  <Grid item xs={1}>
                    <IconButton onClick={handleClose}>
                      <CloseIcon />
                    </IconButton>
                  </Grid>
                </Grid>
              </Item>
            )}
          </For>
        </Stack>
      </DialogContent>
    </Dialog>
  );
};

export default Infos;
