"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePopup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const ThemeEditor_1 = require("./ThemeEditor");
const rebass_1 = require("rebass");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const icons_1 = require("../../components/icons");
const ThemeSelector_1 = require("./ThemeSelector");
class ThemePopupComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.handleCreateNewTheme = (variant) => {
            let nthItem = this.props.UserThemes.length + 1;
            let name = 'Custom-Theme-' + nthItem;
            // make sure it is unique
            while (this.props.UserThemes.some((theme) => theme.Name === name)) {
                nthItem++;
                name = 'Custom-Theme-' + nthItem;
            }
            const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
            newTheme.Variant = variant;
            this.props.api.themeApi.addUserTheme(newTheme);
            this.props.api.themeApi.loadTheme(newTheme.Name);
        };
    }
    render() {
        const isCustomTheme = this.props.api.themeApi
            .getUserThemes()
            .some((theme) => theme.Name === this.props.CurrentTheme);
        const disabled = this.props.accessLevel === 'ReadOnly';
        const newButton = (React.createElement(DropdownButton_1.default, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
                {
                    label: 'Dark',
                    onClick: () => this.handleCreateNewTheme('dark'),
                },
                {
                    label: 'Light',
                    onClick: () => this.handleCreateNewTheme('light'),
                },
            ] },
            React.createElement(icons_1.Icon, { name: "plus" }),
            " New"));
        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
                !this.props.hideShowInWindow && (React.createElement(SimpleButton_1.default, { icon: "open-in-new", onClick: () => {
                        this.props.api.themeApi.internalApi.openInWindow();
                    } })),
                newButton) },
            React.createElement(FormLayout_1.default, null,
                React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
                    React.createElement(rebass_1.Box, { maxWidth: 150 },
                        React.createElement(ThemeSelector_1.ThemeSelector, null)))),
            isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
                React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
    }
    onChangeTheme(value) {
        this.props.SelectTheme(value);
    }
}
function mapStateToProps(state, ownProps) {
    return {
        CurrentTheme: state.Theme.CurrentTheme,
        UserThemes: state.Theme.UserThemes,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
    };
}
exports.ThemePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);
