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 ISpoolsList {
  showSpoolDetails: (instanceID: string) => void;
  sectionID: string;
  showFocusedItem: (type: string, id?: string) => void;
}
export const SpoolsList: FC<ISpoolsList> = ({
  showSpoolDetails,
  sectionID,
  showFocusedItem,
}) => {
  const { spools } = useStoreState(
    (state) => state.projectDetails.projectDetails,
  );

  const generateSpoolList = () => {
    const spoolList: any[] = [];
    spools.forEach((_spool) => {
      if (_spool.instances.length > 0) {
        _spool.instances.forEach((_instance) => {
          if (_instance.sectionID === sectionID) {
            spoolList.push({
              id: _spool.spoolID,
              spoolName: _spool.spoolName,
              instanceID: _instance.instanceID,
            });
          }
        });
      }
    });
    return spoolList;
  };

  const spoolsList = generateSpoolList();

  if (spoolsList.length === 0) {
    return (
      <Aligment vPadding="2rem" hPadding="16px" align="center" justify="center">
        <Text>{t(dictionary.noSpoolsInThisSection)}</Text>
      </Aligment>
    );
  }
  return (
    <Aligment
      direction="column"
      align="stretch"
      onMouseLeave={() => showFocusedItem("spool")}
    >
      {spoolsList.map((item) => (
        <ListItem
          onClick={() => showSpoolDetails(item.instanceID)}
          key={item.instanceID}
          onMouseEnter={() => showFocusedItem("spool", item.instanceID)}
        >
          {item.spoolName}
        </ListItem>
      ))}
    </Aligment>
  );
};