import * as React from "react";
import manageJss, { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
import { ErrorBoundary } from "../../utilities";
import { toPx } from "@microsoft/fast-jss-utilities";
import { ComponentViewTypes } from "./component-view";
/* tslint:disable-next-line */
const checker = "url('data:image/gif;base64,R0lGODlhEAAQAPABANfX1////yH5BAAAAAAALAAAAAAQABAAAAIfhG+hq4jM3IFLJhoswNly/XkcBpIiVaInlLJr9FZWAQAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4KIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIvPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAADs=')";
const componentWrapperBorder = `${toPx(1)} solid rgb(204, 204, 204)`;
const styles = {
    componentWrapper: {
        display: "block",
        padding: toPx(24),
        borderBottom: componentWrapperBorder,
    },
    componentWrapper__transparent: {
        background: checker
    },
    componentWrapperExamples: {
        "&:nth-child(3n + 1), &:nth-child(3n + 2)": {
            borderRight: componentWrapperBorder,
        },
    },
    componentWrapper__active: {
        position: "relative",
        "&::before": {
            content: "''",
            position: "absolute",
            height: "0",
            width: "0",
            transform: "rotate(-45deg)",
            bottom: toPx(-10),
            left: toPx(-10),
            border: `${toPx(10)} solid transparent`,
            opacity: ".5",
            borderRight: (config) => {
                return `${toPx(10)} solid ${config.brandColor}`;
            },
        }
    }
};
/* tslint:disable-next-line */
class ComponentWrapper extends React.Component {
    constructor() {
        super(...arguments);
        this.handleClick = () => {
            if (this.props.onClick) {
                this.props.onClick(this.props.index);
            }
        };
    }
    render() {
        return (React.createElement("div", { className: this.getClassNames(), onClick: this.handleClick, dir: this.props.dir || null, style: this.getInlineStyle() }, this.renderChildren()));
    }
    renderChildren() {
        if (this.props.designSystem) {
            return (React.createElement(DesignSystemProvider, { designSystem: this.props.designSystem },
                React.createElement(ErrorBoundary, null, this.props.children)));
        }
        return (React.createElement(React.Fragment, null,
            React.createElement(ErrorBoundary, null, this.props.children)));
    }
    getInlineStyle() {
        if (!this.props.background) {
            return;
        }
        return this.props.transparentBackground ? null : { background: this.props.background };
    }
    getClassNames() {
        let classNames = this.props.managedClasses.componentWrapper;
        classNames = this.props.transparentBackground
            ? `${this.props.managedClasses.componentWrapper__transparent} ${classNames}`
            : classNames;
        classNames = this.props.active
            ? `${classNames} ${this.props.managedClasses.componentWrapper__active}`
            : classNames;
        return this.props.view === ComponentViewTypes.examples
            ? `${classNames} ${this.props.managedClasses.componentWrapperExamples}`
            : classNames;
    }
}
export default manageJss(styles)(ComponentWrapper);
//# sourceMappingURL=component-wrapper.js.map