import { CATEGORIES, STATUSES } from "../../../config";
import {
  commonPopupConfig,
  residentialPopupConfig,
  rivalsConfig,
  workingPointFields,
} from "./config";
import { Col, Row } from "antd";
import { twMerge } from "tailwind-merge";
import { LAYER_IDS } from "../../Layers/constants";
import { isNil } from "../../../utils.js";

export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
  const isResidential = feature.properties.category === CATEGORIES.residential;
  const isWorking = feature.properties.status === STATUSES.working;
  const isRivals =
    feature.layer.id === LAYER_IDS.pvz || feature.layer.id === LAYER_IDS.other;

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

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

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

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

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

    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>
  );
};