import { FC } from "react";
import { useStoreState } from "../../store";
import { Aligment, Text } from "venice-ui";
import { ListItem } from "./ItemDetailsPanel.styles";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";

interface IWeldsList {
  showDetails: (
    id: string,
    isMapElement: boolean,
    isReference: boolean,
  ) => void;
  sectionID: string;
  showFocusedItem: (type: string, id?: string) => void;
}
export const WeldsList: FC<IWeldsList> = ({
  showDetails,
  sectionID,
  showFocusedItem,
}) => {
  const { elements } = useStoreState(
    (state) => state.projectDetails.projectDetails,
  );
  const welds = elements.filter((_item) => _item.sectionID === sectionID);
  if (welds.length === 0) {
    return (
      <Aligment vPadding="2rem" hPadding="16px" align="center" justify="center">
        <Text>{t(dictionary.noWeldsInThisSection)}</Text>
      </Aligment>
    );
  }
  return (
    <Aligment
      direction="column"
      align="stretch"
      onMouseLeave={() => showFocusedItem("weld")}
    >
      {welds.map((item) => (
        <ListItem
          onClick={() =>
            showDetails(item.id, false, item.sourceElementID !== undefined)
          }
          key={item.id}
          onMouseEnter={() => showFocusedItem("weld", item.id)}
        >
          {item.joint_name}
        </ListItem>
      ))}
    </Aligment>
  );
};