import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { PersonCompanyNameClickable, RectangularIcon } from "..";
// import CheckboxComponent from "../CheckboxComponent";
import { useTable } from "react-table";
import "./style.scss";
const LookAlikeProfiles = ({ 
// onCheckClick = (publicIdentifier: string) => {
//   console.log("Showing the publicIdentifier :: ", publicIdentifier);
// },
onNameClick = (publicIdentifier) => {
    console.log("Showing the publicIdentifier :: ", publicIdentifier);
}, onCompanyClick = (publicIdentifier) => {
    console.log("Showing the publicIdentifier :: ", publicIdentifier);
}, 
// onNameClick = () => {},
profiles, }) => {
    const data = profiles;
    const columns = React.useMemo(() => [
        // { Header: "", accessor: "isSelected", width: "5%" },
        { Header: "NAME", accessor: "fullName" },
        { Header: "TITLE", accessor: "title" },
        { Header: "COMPANY", accessor: "companyName" },
        { Header: "LOCATION", accessor: "locationName" },
    ], []);
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
    return (_jsx("div", { className: "lookAlikeProfilesWrapper", children: _jsxs("table", { className: "lookAlikeProfiles", ...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.publicIdentifier}${row.original.isSelected}` }, row.cells.map((cell) => {
                            if (cell.column.Header === "NAME") {
                                return (_jsx("td", { ...cell.getCellProps(), children: _jsxs("span", { className: "lookAlikeProfiles--NameCell", children: [_jsx(RectangularIcon, { iconPath: cell?.row?.original?.imageUrl, iconSize: "40", borderRadius: "6" }), _jsx(PersonCompanyNameClickable, { text: cell.row.original.fullName ||
                                                    `${cell.row.original.firstName} ${cell.row.original.lastName}`.trim(), onClick: () => onNameClick(cell.row.original._id) })] }) }));
                            }
                            else if (cell.column.Header === "TITLE") {
                                return (_jsx("td", { ...cell.getCellProps(), children: cell.row.original.experience?.[0].title || "" }));
                            }
                            else if (cell.column.Header === "COMPANY") {
                                return (_jsx("td", { ...cell.getCellProps(), className: "lookAlikeProfiles--CompanyCell ", children: _jsx(PersonCompanyNameClickable, { text: cell.row.original.experience?.[0].company_name || "", onClick: () => onCompanyClick(cell.row.original.experience?.[0].universalName ||
                                            "") }) }));
                            }
                            else {
                                return (_jsx("td", { ...cell.getCellProps(), children: cell.render("Cell") }));
                            }
                        })));
                    }) })] }) }));
};
export default LookAlikeProfiles;
