import React, { FC } from "react";
import { Aligment,Text } from "venice-ui";
import {
  ADDITIONAL_TYPES,
  IAddtionalElements,
  TAdditionalType,
} from "../../definitions/additional";
import { ListItem } from "./ItemDetailsPanel.styles";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";

interface isMapElementsList {
  additional: IAddtionalElements[];
  showDetails: (
    id: string,
    isMapElement: boolean,
    isReference: boolean
  ) => void;
  sectionID: string;
  showFocusedItem: (type: string, id?: string) => void;
}
export const MapElementsList: FC<isMapElementsList> = ({
  additional,
  showDetails,
  sectionID,
  showFocusedItem,
}) => {
  const getName = (type: TAdditionalType) => {
    switch (type) {
      case ADDITIONAL_TYPES.dot:
        return t(dictionary.mapElementDot);
      case ADDITIONAL_TYPES.edge:
        return t(dictionary.mapElementLine);
      case ADDITIONAL_TYPES.triage:
        return t(dictionary.mapElementTriage);
      case ADDITIONAL_TYPES.cloud:
        return t(dictionary.mapElementCloud);
    }
  };
  const elements = additional.filter((_item) => _item.sectionID === sectionID);
  if (elements.length === 0) {
    return (
      <Aligment vPadding="2rem" hPadding="16px" align="center" justify="center">
        <Text>{t(dictionary.noElementsInThisSection)}</Text>
      </Aligment>
    );
  }
  return (
    <Aligment
      direction="column"
      align="stretch"
      onMouseLeave={() => showFocusedItem("element")}
    >
      {elements.map((item) => (
        <ListItem
          onClick={() => showDetails(item.id, true, false)}
          key={item.id}
          onMouseEnter={() => showFocusedItem("element", item.id)}
        >
          {getName(item.type)}
        </ListItem>
      ))}
    </Aligment>
  );
};