import { Popup } from "react-map-gl";
import { Button, Col, Row } from "antd";
import { twMerge } from "tailwind-merge";
import { TYPE_MAPPER } from "../config";
import { usePointSelection } from "../stores/usePointSelection";

const pointConfig = [
  {
    field: "name",
  },
  {
    field: "category",
    name: "Тип",
    formatter: (value) => TYPE_MAPPER[value],
  },
  {
    name: "Востребованность, у.е.",
    formatter: (value) => Math.round(value),
  },
];

export const MapPopup = ({ feature, lat, lng, onClose }) => {
  const { include, selection, exclude } = usePointSelection();

  const isSelected = selection.included.has(feature.properties.id);

  const handleSelect = () =>
    isSelected
      ? exclude(feature.properties.id)
      : include(feature.properties.id);

  return (
    <Popup
      longitude={lng}
      latitude={lat}
      anchor="bottom"
      onClose={onClose}
      closeOnClick={false}
    >
      <div>
        {Object.entries(feature.properties).map(([key, value]) => {
          return (
            <Row className={twMerge("p-1")} key={key}>
              <Col className={"font-semibold"} span={15}>
                {key}
              </Col>
              <Col span={9}>{value}</Col>
            </Row>
          );
        })}
      </div>
      <Button type="text" className="mt-2 mx-auto" block onClick={handleSelect}>
        {isSelected ? "Исключить из выборки" : "Добавить в выборку"}
      </Button>
    </Popup>
  );
};