import Tippy from "@tippyjs/react";

interface Row
{
    [key: string]: any
}

type HeaderItem = {
    action?: boolean,
    name: string,
    icon?: string,
    url?: string,
    disableSorting?: boolean,
    addStyle?: string,
    applyTooltip?: boolean,
};

type Headers = {
    [key: string]: string | HeaderItem
};

interface TableBodyProps
{
    data: Row[],
    headers: Headers
}

const TableBody = ({data, headers}: TableBodyProps) => {

    return (
        <tbody>
        {data.length ? (
            data.map((row, index) => (
                <tr key={index}>
                    {Object.keys(row).map((key) => {
                        if (key in headers) {
                            const value = (row[key]?.value) ? row[key].value : row[key];
                            const tooltipContent = row[key]?.tooltipContent ?? '';
                            const header = headers[key];
                            let cellStyle = (typeof row[key] === 'object' && row[key]?.addStyle ? row[key].addStyle : '');
                            cellStyle += ' ' + (typeof header === 'object' ? header?.addStyle : '');

                            if (tooltipContent) {
                                return <Tippy key={key}
                                              content={<div className='tippy-wrapper'><p
                                                  className='tippy-header'>{tooltipContent}</p>
                                              </div>}
                                              arrow
                                              disabled={!tooltipContent} allowHTML={true}>
                                    <td key={key} className={cellStyle}>
                                        {value}
                                    </td>
                                </Tippy>
                            }

                            return (
                                <td key={key} className={cellStyle}>
                                    {value}
                                </td>
                            );
                        }
                        return null;
                    })}

                    {/* Display action columns at last */}
                    {Object.keys(headers).map((key) => {
                        const header = headers[key];
                        if (header && typeof header === 'object' && header.action) {
                            return (
                                <td className={header.addStyle || ''}
                                    key={key}>
                                    <a href={header.url + row.id} className="action-icon"
                                       dangerouslySetInnerHTML={{__html: header.icon || ''}}></a>
                                </td>
                            );
                        }
                        return null;
                    })}
                </tr>
            ))
        ) : (
            <tr>
                <td colSpan={Object.keys(headers).length} className="text-center fw-bold">No results found</td>
            </tr>
        )}
        </tbody>
    );
}

export default TableBody;
