postnet-front/src/Map/Popup/mode-popup/FeatureProperties.jsx

import { CATEGORIES, STATUSES } from "../../../config";
import {
  commonPopupConfig,
  residentialPopupFields,
  rivalsConfig,
  workingPointFields,
} from "./config";
import { Col, Row } from "antd";
import { twMerge } from "tailwind-merge";
import { LAYER_IDS } from "../../Layers/constants";
import {getFilteredGroups, isNil} from "../../../utils.js";
import { useGetRegions } from "../../../components/RegionSelect.jsx";
import {useOtherGroups, usePostamatesAndPvzGroups} from "../../../api.js";
import {useMemo} from "react";
import { TrafficModal } from "../../TrafficModal.jsx";

const getRivalsName = (feature) => {
  const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
  const { data: otherGroups } = useOtherGroups();

  const filteredPostamatesCategories = useMemo(() => {
    return getFilteredGroups(postamatesAndPvzGroups);
  }, [postamatesAndPvzGroups]);

  const filteredOtherCategories = useMemo(() => {
    return getFilteredGroups(otherGroups);
  }, [otherGroups]);

  const filteredPostamatesGroups = useMemo(() => {
    if (!filteredPostamatesCategories) return [];
    return filteredPostamatesCategories
      .map((category) => {
        return [...category.groups]
      }).flat();
  }, [filteredPostamatesCategories]);

  const filteredOtherGroups = useMemo(() => {
    if (!filteredOtherCategories) return [];
    return filteredOtherCategories
      .map((category) => {
        return [...category.groups]
      }).flat();
  }, [filteredOtherCategories]);

  const isOther = feature.layer?.id.includes(LAYER_IDS.other);
  const name = isOther ?
    filteredOtherCategories.find(c => c.id === feature.properties.category_id)?.name :
    filteredPostamatesCategories.find(c => c.id === feature.properties.category_id)?.name;

  const groupName = isOther ?
    filteredOtherGroups.find(c => c.id === feature.properties.group_id)?.name :
    filteredPostamatesGroups.find(c => c.id === feature.properties.group_id)?.name;

  return {
    name,
    groupName
  }
}

export const FeatureProperties = ({ feature, dynamicStatus, postamatId, point }) => {
  const { data } = useGetRegions();
  const isResidential = feature.properties.category === CATEGORIES.residential;
  const isWorking = feature.properties.status === STATUSES.working;
  const { name, groupName } = getRivalsName(feature);

  const isRivals =
    feature.layer?.id.includes(LAYER_IDS.pvz) ||
    feature.layer?.id.includes(LAYER_IDS.other);

  const getConfig = () => {
    if (isRivals) {
      return rivalsConfig;
    }

    const config = isWorking ? [...commonPopupConfig, ...workingPointFields] : commonPopupConfig;
    return isResidential ? [...config, ...residentialPopupFields] : config;
  };

  const getValue = ({ field, render, empty, type, fallbackField }) => {
    let value = point ? point[field] : feature.properties[field];

    if (field === "prediction_current") {
      value = <TrafficModal point={point} />;
    }

    if (field === "category_id") {
      value = name;
    }

    if (field === "group_id") {
      value = groupName;
    }

    if (field === "status" && dynamicStatus) {
      value = dynamicStatus;
    }

    if (field === "postamat_id" && postamatId) {
      value = postamatId;
    }

    if (type === "region") {
      const valueProvider = point ? point : feature
      value = value ? value : valueProvider[fallbackField];
      value = render(value, data?.normalized);
    } else {
      value = render ? render(value) : value;
      value = isNil(value) && empty ? empty : value;
    }

    return value;
  };

  return (
    <div>
      {getConfig().map((row) => {
        return (
          <Row className={twMerge("p-1")} key={row.field}>
            <Col className={"font-semibold"} span={12}>
              {row.name}
            </Col>
            <Col span={12}>{getValue(row)}</Col>
          </Row>
        );
      })}
    </div>
  );
};