import * as React from 'react';
import { connect } from 'react-redux';
import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
import { DataChangeHistoryGrid } from './DataChangeHistoryGrid';
import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
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 { Box, Flex } from '../../components/Flex';
class DataChangeHistoryPopupComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataChangeHistoryAdaptableApi: undefined,
        };
    }
    render() {
        const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
        const adaptableContainerId = 'dataChangeHistoryAdaptableContainer';
        const agGridContainerId = 'dataChangeHistoryAgGridContainer';
        const enabled = changeHistoryMode === 'ACTIVE';
        const disabled = changeHistoryMode === 'INACTIVE';
        const suspended = changeHistoryMode === 'SUSPENDED';
        const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2" },
            disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
            suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
            enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
            (enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
        const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
        const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center' },
            enabled && (React.createElement(React.Fragment, null,
                React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold" }, "Active"),
                !!activationTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
                    "(since ",
                    DateFormatter(activationTime, { Pattern: dateFormat }),
                    ")")))),
            suspended && (React.createElement(React.Fragment, null,
                React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold" }, "Suspended"),
                !!suspensionTime && (React.createElement(Box, { className: "twa:text-2 twa:italic" },
                    "(since ",
                    DateFormatter(suspensionTime, { Pattern: dateFormat }),
                    ")")))),
            disabled && React.createElement(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })));
        const handleChangeUndo = (changeKey) => {
            const changeToBeUndone = this.props.changeHistoryLog[changeKey];
            if (changeToBeUndone) {
                this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
            }
        };
        const handleClearRow = (changeKey) => {
            const changeToBeUndone = this.props.changeHistoryLog[changeKey];
            if (changeToBeUndone) {
                this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeUndone);
            }
        };
        const agGridThemeMode = this.props.api.internalApi
            .getAdaptableInstance()
            .agGridThemeAdapter.getAgGridThemeMode();
        const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
            React.createElement(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column" },
                React.createElement(Flex, { style: {
                        color: 'var(--ab-dashboard__color)',
                        background: 'var(--ab-dashboard__background)',
                    } },
                    React.createElement(Flex, { flexDirection: 'row' },
                        buttonPanel,
                        statusPanel)),
                React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column' },
                    React.createElement("div", { id: adaptableContainerId }),
                    React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
                    React.createElement(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
    }
}
function mapStateToProps(state, ownProps) {
    return {
        changeHistoryLog: state.Internal.DataChangeHistory.logs,
        changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
        activationTime: state.Internal.DataChangeHistory.enableTime,
        suspensionTime: state.Internal.DataChangeHistory.suspendTime,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onChangeHistoryEnable: () => dispatch(DataChangeHistoryEnable()),
        onChangeHistoryDisable: () => dispatch(DataChangeHistoryDisable()),
        onChangeHistorySuspend: () => dispatch(DataChangeHistorySuspend()),
        onChangeHistoryResume: () => dispatch(DataChangeHistoryResume()),
    };
}
export let DataChangeHistoryPopup = connect(mapStateToProps, mapDispatchToProps)(DataChangeHistoryPopupComponent);
