import * as React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
import { Box, Flex, Text } from 'rebass';
import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
import { ButtonPause } from '../Components/Buttons/ButtonPause';
import { ButtonStop } from '../Components/Buttons/ButtonStop';
import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
import Tooltip from '../../components/Tooltip';
import { useAdaptable } from '../AdaptableContext';
import SimpleButton from '../../components/SimpleButton';
import { Icon } from '../../components/icons';
export const DataChangeHistoryViewPanelControl = (props) => {
    const adaptable = useAdaptable();
    const dispatch = useDispatch();
    const onChangeHistoryEnable = React.useCallback(() => dispatch(DataChangeHistoryEnable()), []);
    const onChangeHistoryDisable = React.useCallback(() => dispatch(DataChangeHistoryDisable()), []);
    const onChangeHistorySuspend = React.useCallback(() => dispatch(DataChangeHistorySuspend()), []);
    const onChangeHistoryResume = React.useCallback(() => dispatch(DataChangeHistoryResume()), []);
    const handleOpenPopup = React.useCallback(() => {
        adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
    }, []);
    const dataChangeHistoryState = 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(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
        disabled && (React.createElement(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, { "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, { "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, { "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(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
        enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },
            React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
        suspended && (React.createElement(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
            React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
        disabled && (React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
    return (React.createElement(Flex, { flexDirection: 'row' },
        buttonPanel,
        statusPanel,
        React.createElement(Flex, { ml: 2, alignItems: "center" },
            React.createElement(SimpleButton, { onClick: handleOpenPopup, variant: "text" },
                React.createElement(Icon, { name: "open-in-new" }),
                React.createElement(Box, { ml: 1 }, "Show")))));
};
