import React, { FC } from "react";
import { Table } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { IConnectedWeldWrapper } from "../ConnectedWeld/IConnectedWeld.styles";
import { useStoreState } from "../../store";

interface IExistingSpool {
  sectionID: string;
  onSpoolSelect: (id: string) => void;
}
export const ExistingSpool: FC<IExistingSpool> = ({
  sectionID,
  onSpoolSelect,
}) => {
  const { spools } = useStoreState(
    (state) => state.projectDetails.projectDetails,
  );

  const filteredSpools = spools
    .filter((spool) => spool.sectionID === sectionID)
    .map((_spool) => ({ ..._spool, id: _spool.spoolID }));

  const handleSelect = (id: string) => {
    onSpoolSelect(id);
  };

  const tableHeaders = [
    {
      name: t(dictionary.spoolName),
      valueSource: "spoolName",
      size: "md",
    },
  ];
  return (
    <IConnectedWeldWrapper>
      <Table
        headers={tableHeaders}
        elements={filteredSpools}
        selectable
        onRowClick={handleSelect}
        tableHeight="calc(100vh - 34.6rem)"
        tableWrapperHeight="calc(100vh - 30.6rem)"
        searchInputPlaceholder={t(dictionary.spoolSection)}
        noResultsText={t(dictionary.noResultsFound)}
      />
    </IConnectedWeldWrapper>
  );
};