import { FC } from "react";
import { Aligment, Text } from "venice-ui";
import {
  ItemDetailsLabel,
  ItemDetailsText,
  ListItem,
} from "./ItemDetailsPanel.styles";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { ISpoolDetailForPanel } from "../../definitions/spools";

interface ISpoolDetails {
  data: ISpoolDetailForPanel;
  showFocusedItem: (type: string, id?: string) => void;
  showDetails: (
    id: string,
    isMapElement: boolean,
    isReference: boolean
  ) => void;
}
export const SpoolDetails: FC<ISpoolDetails> = ({
  data,
  showFocusedItem,
  showDetails,
}) => {
  return (
    <>
      <Aligment direction="column" align="flex-start">
        <ItemDetailsLabel>{t(dictionary.spoolName)}</ItemDetailsLabel>
        <ItemDetailsText>{data.spoolName}</ItemDetailsText>
      </Aligment>
      <Aligment direction="column" align="flex-start">
        <ItemDetailsLabel>{t(dictionary.spoolWelds)}</ItemDetailsLabel>
        {data.points.length > 0 ? (
          <Aligment
            direction="column"
            align="stretch"
            onMouseLeave={() => showFocusedItem("weld")}
          >
            {data.points.map((_point) => (
              <ListItem
                onMouseEnter={() => showFocusedItem("weld", _point.id)}
                onClick={() =>
                  showDetails(
                    _point.id,
                    false,
                    _point.sourceElementID !== undefined
                  )
                }
              >
                {_point.joint_name}
              </ListItem>
            ))}
          </Aligment>
        ) : (
            <Text>{t(dictionary.noWeldsInThisSpool)}</Text>
        )}
      </Aligment>
    </>
  );
};