import React, {useState} from 'react';
import ExtensionIcon from "./ExtensionIcon";
import DataTablesTable from "../table/DataTablesTable";
import ColoredText from "../text/ColoredText";
import {baseAddress} from "../../service/backendConfiguration";

const ExtensionDataTable = ({table}) => {
    const [id] = useState("extension-table-" + new Date().getTime() + "-" + (Math.floor(Math.random() * 100000)));

    const mapToCell = (value, j) => {
        if (String(value).startsWith("<a class=\"link\" href=\"")) {
            let linkHtml = value || String(value);
            linkHtml = linkHtml.replace("../", baseAddress + '/');
            return <span dangerouslySetInnerHTML={{__html: linkHtml}}/>;
        }
        return <ColoredText text={value || String(value)}/>
    };

    const data = {
        columns: table.table.columns.map((column, i) => {
            return {
                title: <><ExtensionIcon icon={table.table.icons[i]}/> {column}</>,
                data: {
                    "_": `col${i}Value`,
                    display: `col${i}Display`
                },
            };
        }),
        data: table.table.rows.map((row) => {
            const dataRow = {};
            row.forEach((cell, j) => {
                dataRow[`col${j}Value`] = cell['valueUnformatted'] || cell.value || cell;
                dataRow[`col${j}Display`] = mapToCell(cell.value || cell, j);
            });
            return dataRow;
        })
    };
    const options = {
        responsive: true,
        deferRender: true,
        columns: data.columns,
        data: data.data,
        pagingType: "numbers",
        order: [[1, "desc"]]
    }
    const rowKeyFunction = (row, column) => {
        return JSON.stringify(Object.entries(row).filter(e => e[0].includes('Value'))) + "-" + JSON.stringify(column?.data?._);
    }

    return (
        <DataTablesTable id={id} options={options} rowKeyFunction={rowKeyFunction} colorClass={table.tableColorClass}/>
    )
}

const ExtensionTable = ({table}) => {
    return <ExtensionDataTable table={table}/>;
}

export default ExtensionTable