import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import classNames from '../../_virtual/index.js';
import Accordion from '../Accordion/Accordion.js';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';
import Typography from '../Typography/Typography.js';
import HighlightText from '../HighlightText/HighlightText.js';
import { truncateText, isTextTruncated } from '../../utils/truncateText/truncateText.js';

const TableWithAccordion = ({ highlightText = '', tableMeta = [], tableData = [], accordionType = 'row', noDataContent, height = '100%', withFixedHeader = false, headerType, TableAccordionStateIconWidth = 4, TableAccordionStateIconHeight = 8, }) => {
    const [expandedRowIndex, setExpandedRowIndex] = useState(-1);
    const onAccordionClick = (index) => {
        setExpandedRowIndex(index === expandedRowIndex ? -1 : index);
    };
    const getAccordionTableCellContent = (dataObj, columnObj) => {
        let cellData = dataObj[columnObj.accessor];
        if (columnObj.cell) {
            return columnObj.cell({
                value: cellData,
                row: dataObj,
                column: columnObj.accessor,
            });
        }
        else if (columnObj.accessor) {
            return cellData;
        }
        else if (cellData && typeof cellData !== 'object') {
            return cellData;
        }
        else {
            return '--';
        }
    };
    const getAccordionTableContent = (dataArray) => {
        const accordionSubTable = dataArray.map((rowData, index) => {
            return (jsx("table", { className: "ff-accordion-table", cellSpacing: 0, children: jsx("tbody", { className: "ff-table-body", children: jsx("tr", { className: "ff-table-row", children: tableMeta.map((column, i) => {
                            return (jsx("td", { className: "ff-table-cell", style: { width: column.width }, children: accordionType === 'column' && i === 0 ? ('') : (jsx(Typography, { children: getAccordionTableCellContent(rowData, column) })) }, column.accessor + i));
                        }) }, rowData.id || index) }) }, `accordion-table-${index}`));
        });
        return accordionSubTable;
    };
    return (jsxs("div", { style: { height: height }, className: classNames('ff-accordion-table-container', {
            'ff-accordion-fixed-header-table': withFixedHeader,
        }), children: [jsx("table", { cellSpacing: 0, className: classNames('ff-accordion-table', {
                    'ff-accordion-fixed-header': withFixedHeader,
                }), children: jsx("thead", { children: jsx("tr", { className: "ff-table-row", children: tableMeta.map((column) => (jsx("th", { style: { width: column.width }, className: classNames('ff-table-header', headerType && `ff-accordion-table--${headerType}-bg`), children: jsx("div", { children: jsx(Typography, { fontWeight: "semi-bold", fontSize: 12, children: column.header }) }) }, `header-${column.header}`))) }) }) }), accordionType === 'row' &&
                tableData.map((row, rowIndex) => (jsx(Accordion, { highlightText: highlightText, headerTitle: row.title, color: "var(--text-color)", accordionContent: getAccordionTableContent(row.data), disable: row.disable, disableInfoMessage: row.disableInfoMessage, accordionStateIconName: "arrows_down_icon", AccordionStateIconWidth: TableAccordionStateIconWidth, AccordionStateIconHeight: TableAccordionStateIconHeight }, `accordion-row-${rowIndex}`))), accordionType === 'column' &&
                tableData.map((row, index) => (jsxs("div", { className: "column-table-accordion", children: [jsx("div", { className: "ff-display-flex", children: jsx(Tooltip, { title: row.disable
                                    ? row?.disableInfoMessage
                                    : typeof row.title === 'string' &&
                                        isTextTruncated(row.title, tableMeta[0]?.width, 'pixel')
                                        ? row.title
                                        : '', placement: "bottom-start", children: jsxs("div", { className: `accordion-header ${row.disable && 'accordion-header--disabled'}`, children: [jsx("div", { className: "header-title", children: jsx("span", { children: jsx(Typography, { children: jsx(HighlightText, { text: truncateText(row.title, tableMeta[0]?.width, 'pixel'), highlight: highlightText }) }) }) }), jsx("div", { className: "accordion-arrow", onClick: () => {
                                                !row.disable && onAccordionClick(index);
                                            }, children: jsx(Icon, { name: expandedRowIndex === index
                                                    ? 'arrows_down_icon'
                                                    : 'arrows_right_icon', color: "var(--table-with-accordion-icon-color)", width: TableAccordionStateIconWidth, height: TableAccordionStateIconHeight, hoverEffect: false }) })] }) }) }), expandedRowIndex === index && (jsx("div", { children: getAccordionTableContent(row.data) }))] }, `column-accordion-${index}`))), tableData.length <= 0 && (jsx("div", { className: "no-data-content", style: { height: `calc(${height} - 50px)` }, children: noDataContent }))] }));
};

export { TableWithAccordion as default };
//# sourceMappingURL=TableWithAccordion.js.map
