import * as React from "react";
import { toPx } from "@microsoft/fast-jss-utilities";
import devSiteDesignSystemDefaults from "../design-system";
import { withRouter } from "react-router-dom";
import { ComponentViewTypes } from "./component-view";
import { glyphBuildingblocks, glyphExamples, glyphPage } from "@microsoft/fast-glyphs-msft";
import ComponentViewToggle from "./component-view-toggle";
import manageJss from "@microsoft/fast-jss-manager-react";
export var ActionEnum;
(function (ActionEnum) {
    ActionEnum["configure"] = "configure";
    ActionEnum["view"] = "view";
})(ActionEnum || (ActionEnum = {}));
function menuButtonBase() {
    return {
        position: "relative",
        border: `${toPx(1)} solid transparent`,
        height: toPx(40),
        borderRadius: toPx(2),
        background: "none",
        padding: `0 ${toPx(12)}`,
        margin: toPx(2),
        fontSize: toPx(14),
        "& span": {
            width: toPx(16),
            height: toPx(16),
            marginRight: toPx(5),
            display: "inline-block",
            fontSize: toPx(16),
            verticalAlign: "text-bottom"
        },
        "&:hover": {
            cursor: "pointer",
            background: "rgba(0, 0, 0, 0.04)"
        },
        "&:focus": {
            outline: "none",
            border: (config) => {
                return `${toPx(1)} solid ${config.brandColor || devSiteDesignSystemDefaults.brandColor}`;
            }
        }
    };
}
const styles = {
    actionBar: {
        display: "flex",
        flexBasis: "100%",
        borderBottom: `${toPx(1)} solid #CCCCCC`
    },
    actionBar_componentViewToggles: {
        display: "flex",
        justifyContent: "flex-end",
        flexGrow: "1"
    },
    actionBar_menu: {
        flexGrow: "1"
    },
    actionBar_menu_button: Object.assign({}, menuButtonBase()),
    actionBar_menu_button__active: Object.assign({}, menuButtonBase(), { "&::after": {
            content: "''",
            position: "absolute",
            height: toPx(2),
            bottom: toPx(-1),
            borderRadius: `${toPx(2)} ${toPx(2)} 0 0`,
            left: toPx(12),
            right: toPx(12),
            background: (config) => {
                return config.brandColor;
            }
        } })
};
class ActionBar extends React.Component {
    render() {
        return (React.createElement("div", { className: this.props.managedClasses.actionBar },
            React.createElement("div", { className: this.props.managedClasses.actionBar_menu },
                React.createElement("button", { className: this.getActionBarMenuButtonClassNames(ActionEnum.configure), onClick: this.props.onFormToggle },
                    React.createElement("span", { dangerouslySetInnerHTML: { __html: glyphBuildingblocks } }),
                    "Configure"),
                React.createElement("button", { className: this.getActionBarMenuButtonClassNames(ActionEnum.view), onClick: this.props.onDevToolsToggle }, "Dev Tools")),
            React.createElement("div", { className: this.props.managedClasses.actionBar_componentViewToggles },
                React.createElement(ComponentViewToggle, { to: this.normalizePath(), onClick: this.onComponentViewChangeCallback(ComponentViewTypes.detail), label: "View detail", current: this.isAriaCurrent(ComponentViewTypes.detail), glyph: glyphPage }),
                React.createElement(ComponentViewToggle, { to: `${this.normalizePath()}${ComponentViewTypes[ComponentViewTypes.examples]}/`, onClick: this.onComponentViewChangeCallback(ComponentViewTypes.examples), label: "View examples", current: this.isAriaCurrent(ComponentViewTypes.examples), glyph: glyphExamples }))));
    }
    normalizePath(local) {
        const rootPathRegex = /\(.*/g;
        let normalizePath = this.props.match.path;
        normalizePath = normalizePath.replace(rootPathRegex, "");
        return normalizePath;
    }
    getActionBarMenuButtonClassNames(type) {
        if ((this.props.formView && type === ActionEnum.configure) ||
            (this.props.devToolsView && type === ActionEnum.view)) {
            return this.props.managedClasses.actionBar_menu_button__active;
        }
        return this.props.managedClasses.actionBar_menu_button;
    }
    isAriaCurrent(type) {
        return this.props.componentView === type;
    }
    /**
     * Get a function to call callback with a passed param
     */
    onComponentViewChangeCallback(type) {
        return (e) => {
            if (typeof this.props.onComponentViewChange === "function") {
                this.props.onComponentViewChange(type);
            }
        };
    }
}
export default withRouter(manageJss(styles)(ActionBar));
//# sourceMappingURL=action-bar.js.map