import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import "./style.scss";
import { useTable } from "react-table";
import CheckboxComponent from "../CheckboxComponent";
import RectangularIcon from "../RectangularIcon";
import PersonCompanyNameClickable from "../PersonCompanyNameClickable";
import { CircularIcon } from "..";
import EnrichmentStatus from "../EnrichmentStatus";
const EnrichmentPersonTable = ({ personsData = [], onCheckClick = ({ checked, index }) => {
    console.log({ checked, index });
}, onNameClick = (publicIdentifier) => {
    console.log("Showing the publicIdentifier :: ", { publicIdentifier });
}, onCompanyClick = (universalName, urn) => {
    console.log("universalName: string, urn: string ", { universalName, urn });
}, }) => {
    const data = personsData;
    const columns = React.useMemo(() => [
        { Header: "Name", accessor: "fullName" },
        { Header: "Title", accessor: "currentTitle" },
        { Header: "Company", accessor: "currentCompany" },
        { Header: "Location", accessor: "location" },
        { Header: "Status", accessor: "status" },
        { Header: "Qlu Link", accessor: "qluLink" },
    ], []);
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
    const renderProfileName = ({ publicIdentifier, name, isSelected, lastUpdated, profilePicture, index, onNameClick = (publicIdentifier) => {
        console.log(publicIdentifier);
    }, }) => publicIdentifier ? (_jsxs("span", { className: "enrichmentPersonTable--NameCell", children: [_jsx(CheckboxComponent, { sizeVariant: "xs", checked: isSelected, onClick: (_checked) => onCheckClick({ index, checked: _checked }) }), _jsx(RectangularIcon, { iconPath: profilePicture, iconSize: "40", borderRadius: "6" }, `${publicIdentifier}-${lastUpdated}`), _jsx(PersonCompanyNameClickable, { text: name, onClick: () => onNameClick(publicIdentifier) })] })) : (_jsx("span", { className: "enrichmentPersonTable--NameCell--Placeholder", children: _jsx("p", { children: name }) }));
    return (_jsxs("table", { className: "enrichmentPersonTable--Generic", ...getTableProps(), children: [_jsx("thead", { children: headerGroups.map((headerGroup) => (_jsx("tr", { ...headerGroup.getHeaderGroupProps(), children: headerGroup.headers.map((column) => (_jsx("th", { ...column.getHeaderProps(), children: column.render("Header") }))) }))) }), _jsx("tbody", { ...getTableBodyProps(), children: rows.map((row) => {
                    prepareRow(row);
                    return (_createElement("tr", { ...row.getRowProps(), key: `${row.original.fullName}${row.original.index}` }, row.cells.map((cell) => {
                        if (cell.column.Header === "Name") {
                            return (_jsx("td", { ...cell.getCellProps(), children: renderProfileName({
                                    isSelected: cell.row.original.isSelected,
                                    lastUpdated: cell.row.original.lastUpdated || "",
                                    name: cell?.value,
                                    profilePicture: cell?.row?.original?.profilePicture || "",
                                    publicIdentifier: cell.row.original.publicIdentifier || "",
                                    index: cell.row.original.index,
                                    onNameClick: onNameClick,
                                }) }));
                        }
                        else if (cell.column.Header === "Status") {
                            return (_jsx("td", { ...cell.getCellProps(), children: _jsx(EnrichmentStatus, { status: cell?.value }) }));
                        }
                        else if (cell.column.Header === "Company") {
                            return (_jsx("td", { ...cell.getCellProps(), children: cell?.value && (_jsxs("span", { className: "enrichmentPersonTable--NameCell", children: [_jsx(CircularIcon, { iconPath: cell.row.original.companyLogo || "", altImageType: "company", iconSize: "40", errorImageContainerSize: "40" }), _jsx(PersonCompanyNameClickable, { text: cell?.value, onClick: () => onCompanyClick(cell.row.original.companyUniversalName || "", cell.row.original.companyUrn || "") })] })) }));
                        }
                        else if (cell.column.Header === "Qlu Link") {
                            return (_jsx("td", { ...cell.getCellProps(), children: cell?.value && (_jsx("span", { className: "enrichmentPersonTable--NameCell", children: _jsx(PersonCompanyNameClickable, { text: cell?.value, onClick: () => {
                                            if (cell?.value) {
                                                window.open(cell.value, "_blank");
                                            }
                                        } }) })) }));
                        }
                        else {
                            return (_jsx("td", { ...cell.getCellProps(), children: cell.render("Cell") || "N/A" }));
                        }
                    })));
                }) })] }));
};
export default EnrichmentPersonTable;
