import * as React from "react";
import { Route, Switch, withRouter } from "react-router-dom";
import manageJss from "@microsoft/fast-jss-manager-react";
/**
 * Describes the possible views for a component
 */
export var ComponentViewTypes;
(function (ComponentViewTypes) {
    ComponentViewTypes[ComponentViewTypes["examples"] = 0] = "examples";
    ComponentViewTypes[ComponentViewTypes["detail"] = 1] = "detail";
})(ComponentViewTypes || (ComponentViewTypes = {}));
const style = {
    componentExampleView: {
        overflow: "auto",
        flexGrow: "1",
        width: "100%",
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr",
    },
    componentDetailView: {
        overflow: "auto",
        flexGrow: "1"
    }
};
class ComponentView extends React.Component {
    constructor() {
        super(...arguments);
        this.renderView = () => {
            return (React.createElement(React.Fragment, null, this.props.children));
        };
    }
    render() {
        return (React.createElement("div", { className: this.getClassName() },
            React.createElement(Switch, null,
                React.createElement(Route, { path: "/", exact: true, component: null }),
                React.createElement(Route, { path: this.props.match.url, exact: true, component: this.renderView }),
                React.createElement(Route, { path: `${this.props.match.url}/${ComponentViewTypes[ComponentViewTypes.examples]}`, exact: true, component: this.renderView }))));
    }
    getClassName() {
        return this.props.viewType === ComponentViewTypes.examples
            ? this.props.managedClasses.componentExampleView
            : this.props.managedClasses.componentDetailView;
    }
}
export default manageJss(style)(withRouter(ComponentView));
//# sourceMappingURL=component-view.js.map