import React, { memo, useEffect, useState } from 'react';
import { HistoryTree } from '../HistoryTree';
import { ContributorsPanel } from '../ContributorsPanel';
import { useHistoryTree } from '../hooks/useHistoryTree';
import { useStyles } from './styles';
var HistoryView = function (_a) {
    var isLoading = _a.isLoading, historyWithTotal = _a.historyWithTotal, contributorsUris = _a.contributorsUris, entityUri = _a.entityUri, canLoadMore = _a.canLoadMore, onLoadMore = _a.onLoadMore, historyEvent = _a.historyEvent;
    var styles = useStyles();
    var _b = useState(null), selectedUris = _b[0], setSelectedUris = _b[1];
    useEffect(function () {
        setSelectedUris(contributorsUris);
    }, [contributorsUris]);
    var _c = useHistoryTree({
        entityUri: entityUri,
        historyChanges: historyWithTotal === null || historyWithTotal === void 0 ? void 0 : historyWithTotal.changes,
        selectedUris: selectedUris
    }), historyData = _c.historyData, findPreviousChange = _c.findPreviousChange;
    return (React.createElement("div", { className: styles.root },
        React.createElement(ContributorsPanel, { values: contributorsUris, selectedValues: selectedUris, onSelectValues: setSelectedUris, entityUri: entityUri, className: styles.borderBottom }),
        React.createElement(HistoryTree, { historyData: historyData, isLoading: isLoading, onLoadMore: onLoadMore, canLoadMore: canLoadMore, entityUri: entityUri, historyEvent: historyEvent, findPreviousChange: findPreviousChange })));
};
export default memo(HistoryView);
