import * as React from "react";
import manageJss from "@microsoft/fast-jss-manager-react";
import { toPx } from "@microsoft/fast-jss-utilities";
const style = {
    "@keyframes SiteNavigationOpen": {
        "0%": {
            opacity: 0,
            transform: "scaleX(0.93)",
            height: "65vh"
        },
        "100%": {
            opacity: 1,
            transform: "scaleX(1)",
            height: "100vh"
        }
    },
    "@keyframes SiteNavigationClose": {
        "0%": {
            opacity: 1,
            transform: "scale(1)",
            height: "100vh"
        },
        "100%": {
            opacity: 0,
            transform: "scale(0.93)",
            height: "65vh"
        }
    },
    siteMenu: {
        display: "inline-block",
        verticalAlign: "middle"
    },
    siteMenu_nav: {
        position: "absolute",
        background: "#FFFFFF",
        zIndex: "5",
        height: "100vh",
        top: "0",
        left: "0",
        width: toPx(320),
        animationDuration: "0.25s",
        animationFillMode: "both",
        display: "none",
        boxShadow: `0 ${toPx(16)} ${toPx(24)} 0 rgba(0, 0, 0, 0.1)`
    },
    siteMenu_nav__open: {
        animationName: "SiteNavigationOpen",
        transitionTimingFunction: "cubic-bezier(.52,0,.74,0)"
    },
    siteMenu_nav__close: {
        animationName: "SiteNavigationClose",
        transitionTimingFunction: "cubic-bezier(.26,1,.48,1)"
    },
    siteMenu_button: {
        width: toPx(40),
        height: toPx(40),
        padding: toPx(7),
        border: "none",
        background: "none",
        transition: "all 0.1s ease-in-out",
        "&:focus": {
            border: (config) => {
                return `${toPx(1)} solid ${config.brandColor}`;
            },
            outline: "none"
        },
    },
    siteMenu_button__open: {
        "&:hover": {
            background: (config) => {
                return config.brandColor;
            },
        },
    },
    siteMenu_button__close: {
        "&:hover": {
            background: "rgba(0,0,0, .2)"
        },
    },
    siteMenu_buttonGlyph__open: {
        fill: (config) => {
            return config.backgroundColor;
        },
    },
    siteMenu_buttonGlyph__close: {
        fill: (config) => {
            return config.foregroundColor;
        },
    },
    siteMenu_ul: {
        listStyle: "none",
        padding: toPx(12)
    },
};
/* tslint:disable-next-line */
const waffleGlyph = "M6.2,10V6h4v4Zm0,8V14h4v4Zm0,8V22h4v4Zm8-16V6h4v4Zm0,8V14h4v4Zm0,8V22h4v4Zm8-20h4v4h-4Zm0,12V14h4v4Zm0,8V22h4v4Z";
class SiteMenu extends React.Component {
    constructor(props) {
        super(props);
        this.handleMenuVisibilityToggle = () => {
            this.setState({
                visibility: !this.state.visibility
            }, () => {
                if (this.state.visibility) {
                    this.navPaneElement.current.style.display = "block";
                }
                this.navPaneElement.current.addEventListener("animationend", this.handleNavAnimationEnd);
            });
        };
        this.handleNavAnimationEnd = (e) => {
            const element = this.navPaneElement.current;
            element.removeEventListener("animationend", this.handleNavAnimationEnd);
            if (!this.state.visibility) {
                element.style.display = "none";
            }
        };
        this.state = {
            visibility: false
        };
        this.navPaneElement = React.createRef();
    }
    // tslint:disable
    render() {
        return (React.createElement("div", { className: this.props.managedClasses.siteMenu },
            this.renderWaffleButton("open"),
            React.createElement("nav", { className: this.generateClassName(), "aria-hidden": !this.state.visibility, ref: this.navPaneElement },
                this.renderWaffleButton("close"),
                React.createElement("ul", { className: this.props.managedClasses.siteMenu_ul }, this.props.children))));
    }
    renderWaffleButton(state) {
        const className = `${this.props.managedClasses.siteMenu_button} ${this.props.managedClasses[`siteMenu_button__${state}`]}`;
        return (React.createElement("button", { onClick: this.handleMenuVisibilityToggle, "aria-label": state, className: className },
            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", className: this.props.managedClasses[`siteMenu_buttonGlyph__${state}`] },
                React.createElement("title", null, "waffle"),
                React.createElement("path", { d: waffleGlyph }))));
    }
    generateClassName() {
        const className = this.props.managedClasses.siteMenu_nav;
        return this.state.visibility
            ? `${className} ${this.props.managedClasses.siteMenu_nav__open}`
            : `${className} ${this.props.managedClasses.siteMenu_nav__close}`;
    }
}
export default manageJss(style)(SiteMenu);
//# sourceMappingURL=menu.js.map