"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataChangeHistoryViewPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
const rebass_1 = require("rebass");
const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
const AdaptableContext_1 = require("../AdaptableContext");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const icons_1 = require("../../components/icons");
const DataChangeHistoryViewPanelControl = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const dispatch = (0, react_redux_1.useDispatch)();
    const onChangeHistoryEnable = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistoryEnable)()), []);
    const onChangeHistoryDisable = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistoryDisable)()), []);
    const onChangeHistorySuspend = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistorySuspend)()), []);
    const onChangeHistoryResume = React.useCallback(() => dispatch((0, InternalRedux_1.DataChangeHistoryResume)()), []);
    const handleOpenPopup = React.useCallback(() => {
        adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
    }, []);
    const dataChangeHistoryState = (0, react_redux_1.useSelector)((state) => state.Internal.DataChangeHistory);
    const changeHistoryMode = dataChangeHistoryState.currentMode;
    const activationTime = dataChangeHistoryState.enableTime;
    const suspensionTime = dataChangeHistoryState.suspendTime;
    const enabled = changeHistoryMode === 'ACTIVE';
    const disabled = changeHistoryMode === 'INACTIVE';
    const suspended = changeHistoryMode === 'SUSPENDED';
    const gap = props.gap ?? 'var(--ab-space-1)';
    const buttonsPaddingY = props.buttonsPaddingY ?? 2;
    const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
        disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
        suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
        enabled && (React.createElement(ButtonPause_1.ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
        (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
    const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
    const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
        enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },
            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
        suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}` },
            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
        disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
    return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
        buttonPanel,
        statusPanel,
        React.createElement(rebass_1.Flex, { ml: 2, alignItems: "center" },
            React.createElement(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text" },
                React.createElement(icons_1.Icon, { name: "open-in-new" }),
                React.createElement(rebass_1.Box, { ml: 1 }, "Show")))));
};
exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;
