import * as React from "react";
import { toPx } from "@microsoft/fast-jss-utilities";
import devSiteDesignSystemDefaults from "../design-system";
import Form from "@microsoft/fast-form-generator-react";
import manageJss from "@microsoft/fast-jss-manager-react";
export var TabType;
(function (TabType) {
    TabType["presets"] = "Presets";
})(TabType || (TabType = {}));
const style = {
    configurationPanel: {
        width: "100%",
        overflowX: "auto"
    },
    configurationPanel_controls: {
        display: "flex",
        padding: `0 ${toPx(4)}`,
        "& ul": {
            margin: "0",
            padding: "0",
            listStyleType: "none",
            "& li": {
                display: "inline-block"
            }
        },
        "& button": {
            border: `${toPx(1)} solid transparent`,
            height: toPx(40),
            padding: `${toPx(6)} ${toPx(8)}`,
            margin: toPx(2),
            minWidth: toPx(25),
            backgroundPosition: "center",
            "&:hover": {
                cursor: "pointer",
                background: "rgba(0, 0, 0, 0.04)"
            },
            "&:focus": {
                outline: "none",
                border: (config) => {
                    return `${toPx(1)} solid ${config.brandColor || devSiteDesignSystemDefaults.brandColor}`;
                }
            }
        }
    },
    configurationPanel_controlsTabs: {
        flexGrow: "1"
    },
    configurationPanel_tab: {
        "& button": {
            background: "none",
            borderRadius: toPx(2),
            position: "relative",
            "&:focus": {
                outline: "none"
            }
        }
    },
    configurationPanel_tab__active: {
        "& button": {
            borderRadius: toPx(3),
            position: "relative",
            "&:after": {
                position: "absolute",
                bottom: toPx(-1),
                left: toPx(4),
                right: toPx(4),
                content: "''",
                height: toPx(2),
                borderRadius: `${toPx(2)} ${toPx(2)} 0 0`,
                background: "#FB356D"
            }
        }
    },
    configurationPanel_tabPanel: {
        "&[aria-hidden=\"true\"]": {
            display: "none"
        }
    },
    configurationPanel_paneForm: {
        padding: toPx(12)
    },
};
/* tslint:disable-next-line */
class ConfigurationPanel extends React.Component {
    constructor(props) {
        super(props);
        this.tabs = [TabType.presets];
        this.state = {
            activeTab: this.props.activeTab || TabType.presets
        };
    }
    render() {
        return (React.createElement("div", { className: this.props.managedClasses.configurationPanel },
            React.createElement("div", { className: this.props.managedClasses.configurationPanel_controls }, this.renderTabs()),
            this.renderTabPanels()));
    }
    renderTabs() {
        return (React.createElement("ul", { className: this.props.managedClasses.configurationPanel_controlsTabs }, this.renderTabItems()));
    }
    renderTabItems() {
        return this.tabs.map((tabItem, index) => {
            if (tabItem === TabType.presets) {
                return (React.createElement("li", { key: index, className: this.getTabClassNames(tabItem) },
                    React.createElement("button", { onClick: this.handleChangeTab(tabItem) }, tabItem)));
            }
        });
    }
    renderTabPanels() {
        return (React.createElement("div", null, this.renderTabPanelItems()));
    }
    renderTabPanelItems() {
        return this.tabs.map((tabItem, index) => {
            return (React.createElement("div", { key: index, "aria-hidden": this.state.activeTab !== tabItem, className: this.props.managedClasses.configurationPanel_tabPanel }, this.renderTabPanelContent(tabItem)));
        });
    }
    renderTabPanelContent(tabItem) {
        switch (tabItem) {
            case TabType.presets:
                return this.renderPresets();
            default:
                return null;
        }
    }
    renderPresets() {
        return (React.createElement(Form, { className: this.props.managedClasses.configurationPanel_paneForm, schema: this.props.schema, data: this.props.data, onChange: this.props.onChange, childOptions: this.props.formChildOptions }));
    }
    getTabClassNames(tabItem) {
        if (tabItem === this.state.activeTab) {
            return `${this.props.managedClasses.configurationPanel_tab} ${this.props.managedClasses.configurationPanel_tab__active}`;
        }
        return this.props.managedClasses.configurationPanel_tab;
    }
    handleChangeTab(tab) {
        return (e) => {
            this.setState({
                activeTab: tab
            });
        };
    }
}
export default manageJss(style)(ConfigurationPanel);
//# sourceMappingURL=configuration-panel.js.map