import { Grid, IconButton } from "@suid/material";
import { Feature } from "ol";
import { Geometry } from "ol/geom";
import { getLength } from "ol/sphere";
import { Component, createSignal, For, Show } from "solid-js";
import { useI18n } from "@solid-primitives/i18n";
import EditIcon from "@suid/icons-material/Edit";
import { Paper, Stack } from "@suid/material";
import styled from "@suid/material/styles/styled";
import Dialog from "../dialog";

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,
  });
  selectedFeatures.map((feature) => feature.set("isSelected", false));
  selectedFeatures = features;
  features.map((feature: Feature<Geometry>) => {
    const id = feature.get("id");
    feature.set("isSelected", true);
    //    const geometry = feature.getGeometry();
    //    const length = getLength(geometry, { projection: "EPSG:4326" });
    console.log({
      caller: "<Infos/> / clickHandler / feature",
      event,
      feature,
      id,
      //      geometry,
      //      length,
    });
  });
  if (features.length > 0) {
    setOpen(true);
  }
};

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

  const formatLength = (length: number) => {
    if (length > 1000) {
      const l = length / 1000;
      return ` ${l.toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })} km`;
    }
    return ` ${length.toLocaleString(undefined, {
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    })} m`;
  };

  return (
    <Dialog closeHandler={handleClick} open={open()} title={t("nearby")}>
      <Stack
        spacing={1}
        direction="column"
        alignItems="center"
        sx={{ width: "calc(100% - 5px)" }}
      >
        <For each={selectedFeatures}>
          {(feature) => {
            const geometry = feature.getGeometry();
            const length = geometry
              ? getLength(geometry, { projection: "EPSG:4326" })
              : undefined;
            return (
              <Item sx={{ width: "calc(100% - 1px)" }}>
                <Grid container spacing={2} alignItems="center">
                  <Grid item xs={11}>
                    {feature.get("getTitle")
                      ? feature.get("getTitle")()
                      : t(feature.get("type"))}
                    {length ? formatLength(length) : ""}
                  </Grid>
                  <Grid item xs={1} sx={{ paddingLeft: "0px" }}>
                    <Show when={feature.get("edit")}>
                      <IconButton onClick={feature.get("edit")}>
                        <EditIcon />
                      </IconButton>
                    </Show>
                  </Grid>
                </Grid>
              </Item>
            );
          }}
        </For>
      </Stack>
    </Dialog>
  );
};

export default Infos;