postnet-front/src/Map/Legend.jsx

import {useMode} from "../stores/useMode";
import {MODES} from "../config";
import {
  APPROVE_COLOR,
  CANCELLED_COLOR,
  OTHER_POSTAMATES_COLOR,
  PENDING_COLOR, PVZ_COLOR,
} from "./Layers/layers-config";
import {Logo} from "../icons/Logo.jsx";
import {Collapse, Image} from "antd";
import React from "react";

const LegendPointItem = ({color, imageSrc, name, hideImage}) => {
  return (
    <div className="flex gap-2 items-center">
      {imageSrc && <Image src={imageSrc} width={12} height={12} className='flex items-center' preview={false}/>}
      {color && !imageSrc && (
        <span
          className="rounded-xl w-3 h-3 inline-block"
          style={{backgroundColor: color}}
        />
      )}
      {!imageSrc && !color && !hideImage && (
        <Logo width={12} height={12} fill="#E63941"/>
      )}

      <span className='text-xs text-grey'>{name}</span>
    </div>
  );
};

const pendingColors = PENDING_COLOR.stops.map(([_value, color]) => color);

const LegendColorRampItem = ({colors, name}) => {
  return (
    <div className="mb-3">
      <span className={"mb-1 mt-3 text-center"}>{name}</span>
      <div className="w-[200px]">
        <div
          className={"w-full h-[10px] rounded-xl"}
          style={{
            background: `linear-gradient(to right, ${colors.join(",")})`,
          }}
        />
      </div>

      <span className="italic">прогноз трафика →</span>
    </div>
  );
};

const LegendGroupItem = ({item, color}) => {
  return (
    <Collapse
      bordered={false}
      expandIcon={null}
      style={{
        background: 'none',
      }}
      className="legend_group"
    >
      <Collapse.Panel
        key={"opened"}
        header={<LegendPointItem name={item.name} hideImage />}
      >
        <div className="ml-3 my-1">
          {item.groups && item.groups?.map((groupItem) => {
            return (
              <div key={groupItem.id} className="my-1">
                <LegendPointItem
                  color={color}
                  imageSrc={groupItem.image}
                  name={groupItem.name}
                />
              </div>
            )
          })}
        </div>

      </Collapse.Panel>
    </Collapse>
  )
}

export function Legend({ postGroups, otherGroups }) {
  const {mode} = useMode();

  return (
    <div
      className="absolute bottom-[20px] left-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
      <div>
        <div className="space-y-1">
          {mode === MODES.PENDING && (
            <>
              <LegendColorRampItem
                colors={pendingColors}
                name="Локации к рассмотрению"
              />
              <LegendPointItem name="Работающие постаматы"/>
              <LegendPointItem
                name="Отмененные локации"
                color={CANCELLED_COLOR}
              />
            </>
          )}
          {mode === MODES.ON_APPROVAL && (
            <>
              <LegendPointItem
                name="Согласование-установка"
                color={APPROVE_COLOR}
              />
              <LegendPointItem name="Работающие постаматы"/>
              <LegendPointItem
                name="Отмененные локации"
                color={CANCELLED_COLOR}
              />
            </>
          )}
          {mode === MODES.WORKING && (
            <>
              <LegendPointItem name="Работающие постаматы"/>
            </>
          )}
        </div>
      </div>

      <div className="space-y-1">
        {postGroups?.map((item) => {
          return <LegendGroupItem key={item.id} item={item} color={PVZ_COLOR}/>
        })}
      </div>
      <div className="space-y-1">
        {otherGroups?.map((item) => {
          return <LegendGroupItem key={item.id} item={item} color={OTHER_POSTAMATES_COLOR}/>
        })}
      </div>
    </div>
  );
}