import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import classNames from 'classnames';
import Accordion from '../Accordion';
import './TableWithAccordion.scss';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import '../../../index.scss';
import Typography from '../Typography';
import HighlightText from '../HighlightText';
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 : '', 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: row.title, 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 default TableWithAccordion;
//# sourceMappingURL=TableWithAccordion.js.map