import React, { useCallback, useMemo, useEffect, useState } from 'react';
import { Typography, LinearProgress } from '@material-ui/core';
import { AmbientCard } from '../../UI/surfaces/cards/AmbientCard';
import { AgTable, useAgGridApi } from '../../utilities/aggrid/AgTable.tsx';
import { formatDateToLocaleString } from '../../utilities/input/DateUtilities';
import { DateTime } from 'luxon';
import { IconRenderer } from '../../UI/templates/ui/renderers/IconRenderer';
import { getSanitizedName } from '../../utilities/entities/entityUtilities';
const defaultColDef = {
    resizable: true,
    editable: false,
    sortable: true,
    filter: true
};
export const RecentlyLoadedNodesTable = (props) => {
    const { recentlyLoadedNodes, loading, onLoadedNodeClick, tableHeight, tree, columnDefs, hideTitle = false } = props;
    const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();
    const [selectedRow, setSelectedRow] = useState();
    useEffect(() => {
        if (!gridColumnApi)
            return;
        gridApi === null || gridApi === void 0 ? void 0 : gridApi.sizeColumnsToFit();
        setSelectedRow((gridApi === null || gridApi === void 0 ? void 0 : gridApi.getSelectedRows().length) && gridApi.getSelectedRows()[0]);
    }, [gridColumnApi, gridApi]);
    const handleRowSelected = useCallback((event) => {
        if (!event.node.selected)
            return;
        if (!gridApi)
            return;
        const selectedRowData = gridApi.getSelectedRows().length && gridApi.getSelectedRows()[0];
        if (!selectedRowData)
            return;
        setSelectedRow(selectedRowData);
        if (selectedRowData === null || selectedRowData === void 0 ? void 0 : selectedRowData.nodeInfo) {
            // if the row is a node
            onLoadedNodeClick(selectedRowData.nodeInfo);
        }
    }, [gridApi, onLoadedNodeClick]);
    const getterRowData = useCallback((params) => {
        var _a;
        return (_a = params.data) === null || _a === void 0 ? void 0 : _a.iconData;
    }, []);
    const columnDefinitions = useMemo(() => columnDefs
        ? columnDefs
        : [
            (tree === null || tree === void 0 ? void 0 : tree.treeStructure) && {
                headerName: '',
                cellRenderer: 'iconRenderer',
                valueGetter: getterRowData,
                maxWidth: 60,
                resizable: false,
                suppressMenu: true,
                sortable: false,
                cellStyle: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }
            },
            {
                headerName: 'Name',
                field: 'name',
                minWidth: 120,
                maxWidth: 300
            },
            {
                headerName: 'Type',
                field: 'type',
                valueGetter: (params) => {
                    var _a;
                    return getSanitizedName((_a = params.data) === null || _a === void 0 ? void 0 : _a.type);
                },
                minWidth: 80
            },
            {
                headerName: 'Date Loaded',
                field: 'dateLoaded',
                minWidth: 80
            },
            {
                headerName: '',
                field: 'nodeInfo',
                maxWidth: 0,
                cellStyle: {
                    display: 'none'
                }
            }
        ], [columnDefs, getterRowData, tree]);
    const recentlyLoadedNodesValues = useMemo(() => recentlyLoadedNodes === null || recentlyLoadedNodes === void 0 ? void 0 : recentlyLoadedNodes.map((loadedNode) => {
        var _a, _b, _c, _d;
        const matchingNode = (_a = tree === null || tree === void 0 ? void 0 : tree.treeStructure) === null || _a === void 0 ? void 0 : _a.find((node) => {
            var _a;
            return node.properties.catalogReturnObject ===
                ((_a = loadedNode === null || loadedNode === void 0 ? void 0 : loadedNode.nodeDetails) === null || _a === void 0 ? void 0 : _a.catalogReturnObject);
        });
        return {
            iconData: ((_b = matchingNode === null || matchingNode === void 0 ? void 0 : matchingNode.properties) === null || _b === void 0 ? void 0 : _b.defaultIcon) || {
                name: 'PictureTileIcon'
            },
            name: (_c = loadedNode === null || loadedNode === void 0 ? void 0 : loadedNode.nodeDetails) === null || _c === void 0 ? void 0 : _c.nodeLabel,
            type: (_d = loadedNode === null || loadedNode === void 0 ? void 0 : loadedNode.nodeDetails) === null || _d === void 0 ? void 0 : _d.catalogReturnObject,
            dateLoaded: formatDateToLocaleString(loadedNode === null || loadedNode === void 0 ? void 0 : loadedNode.dateLoaded, DateTime.DATETIME_MED),
            nodeInfo: loadedNode
        };
    }), [recentlyLoadedNodes, tree]);
    return (React.createElement(AmbientCard, { title: !hideTitle ? 'Recently Loaded' : ' ', fullWidth: true, noAdornment: true }, loading || !tree ? (React.createElement(LinearProgress, null)) : (recentlyLoadedNodes === null || recentlyLoadedNodes === void 0 ? void 0 : recentlyLoadedNodes.length) ? (React.createElement(AgTable, { columnDefs: columnDefinitions, defaultColDef: defaultColDef, rowData: recentlyLoadedNodesValues || [], onGridReady: onGridReady, getRowNodeId: (row) => row.name, onRowSelected: handleRowSelected, rowSelection: "single", frameworkComponents: { iconRenderer: IconRenderer }, height: tableHeight })) : (React.createElement(Typography, null, "No Data Recently Loaded."))));
};
//# sourceMappingURL=RecentlyLoadedNodesTable.js.map