import {Button} from "antd";
import {PopupWrapper} from "./PopupWrapper";
import {FeatureProperties} from "./FeatureProperties/FeatureProperties";
import {usePopup} from "../../stores/usePopup.js";
import { ChartModal } from "../../dzkh-features/Chart/ChartModal.jsx";

const SingleFeaturePopup = ({ feature }) => {
  return (
    <div className="flex-col gap-2">
      {feature.properties.point_type === "potreb" && <ChartModal point={feature.properties}/>}
      <FeatureProperties feature={feature} />
    </div>

  );
};

const typeMapper = {
  potreb: 'Consumer',
  tp: 'Source',
  ods: 'Dispatch center'
}

const MultipleFeaturesPopup = ({ features }) => {
  const { setPopup } = usePopup();

  return (
    <div className="space-y-2 p-1">
      {features.map((feature) => {
        const featureId = feature.properties.id;

        return (
          <div className="flex flex-row items-center gap-2 w-full" key={featureId}>
            <Button
              className="text-start flex-1 !w-0"
              block
              onClick={() => {
                setPopup({
                  features: [feature],
                  coordinates: feature.geometry.coordinates,
                });
              }}
            >
              <div className="space-x-2 flex items-center w-full">
                <span className="flex-1 truncate inline-block">
                    {typeMapper[feature.properties.point_type]}
                  </span>
              </div>
            </Button>
          </div>
        );
      })}
    </div>
  );
};

export const MapPopup = ({features, lat, lng, onClose}) => {
  const getContent = () => {
    if (features.length === 1) {
      return <SingleFeaturePopup feature={features[0]} />;
    }

    return <MultipleFeaturesPopup features={features} />;
  };

  return (
    <PopupWrapper lat={lat} lng={lng} onClose={onClose}>
      {getContent()}
    </PopupWrapper>
  );
};
