import React, { useCallback, useEffect, useMemo, useState } from 'react';
import classnames from 'classnames';
import { adjust, evolve, filter, map, not, pipe } from 'ramda';
import { buildGroupedItems, flattenGroupedItems, getItemKey, isGroupItem } from './helpers';
import Divider from '@mui/material/Divider';
import { removeIgnoredItems } from '../utils/activities';
import { GroupItem } from './components/GroupItem';
import { ActivityItem } from './components/ActivityItem';
import { AutoSizeList } from '../../../AutoSizeList';
import { CollapsibleItemsProvider } from '../contexts/CollapsibleItemsContext';
import { useStyles } from './styles';
export var ActivityLog = function (_a) {
    var width = _a.width, height = _a.height, activities = _a.activities;
    var styles = useStyles();
    var _b = useState([]), groupedItems = _b[0], setGroupedItems = _b[1];
    var toggleGroupedItem = function (index) {
        setGroupedItems(adjust(index, evolve({ collapsed: not })));
    };
    useEffect(function () {
        pipe(map(removeIgnoredItems), filter(function (_a) {
            var itemsTotal = _a.itemsTotal;
            return itemsTotal !== 0;
        }), buildGroupedItems, setGroupedItems)(activities);
    }, [activities]);
    var flatItems = useMemo(function () { return flattenGroupedItems(groupedItems); }, [groupedItems]);
    var renderRow = useCallback(function (_a) {
        var _b;
        var data = _a.data, index = _a.index;
        var item = data[index];
        var isSingleRow = data.length === 1;
        var isFirstRow = index === 0;
        var isLastRow = index === data.length - 1;
        return (React.createElement("div", { className: classnames(styles.listRow, (_b = {},
                _b[styles.singleRow] = isSingleRow,
                _b[styles.firstRow] = isFirstRow,
                _b[styles.lastRow] = isLastRow,
                _b)) }, isGroupItem(item) ? (React.createElement(GroupItem, { item: item, onToggle: toggleGroupedItem })) : (React.createElement(React.Fragment, null,
            React.createElement(ActivityItem, { item: item }),
            !isLastRow && React.createElement(Divider, { className: styles.rowDivider, light: true, variant: "inset" })))));
    }, []); // eslint-disable-line
    return (React.createElement(CollapsibleItemsProvider, null,
        React.createElement(AutoSizeList, { width: width, height: height, data: flatItems, defaultItemSize: 40, itemKey: getItemKey }, renderRow)));
};
