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

interface IConnectedWeld {
  elements: IExtendElementType[];
  onSelect: (id: string) => void;
}
export const ConnectedWeld: FC<IConnectedWeld> = ({ elements, onSelect }) => {
  const handleSelect = (id: string) => {
    onSelect(id);
  };
  const tableHeaders = [
    {
      name: t(dictionary.joint_name),
      valueSource: "joint_name",
      size: "md",
    },
    {
      name: t(dictionary.kks),
      valueSource: "kks",
      size: "md",
    },
    {
      name: t(dictionary.page),
      valueSource: "page",
      size: "sm",
    },
  ];
  return (
    <IConnectedWeldWrapper>
      <Table
        headers={tableHeaders}
        elements={elements}
        selectable
        onRowClick={handleSelect}
        tableHeight="calc(100vh - 34.6rem)"
        tableWrapperHeight="calc(100vh - 30.6rem)"
        searchInputPlaceholder={t(dictionary.weldSection)}
        noResultsText={t(dictionary.noResultsFound)}
      />
    </IConnectedWeldWrapper>
  );
};