import * as React from "react";
import { Link } from "react-router-dom";
import TocMenu from "./toc-menu";
import devSiteDesignSystemDefaults from "../design-system";
import { toPx } from "@microsoft/fast-jss-utilities";
import manageJss from "@microsoft/fast-jss-manager-react";
export var itemType;
(function (itemType) {
    itemType["a"] = "a";
    itemType["tocMenu"] = "tocMenu";
    itemType["link"] = "link";
})(itemType || (itemType = {}));
const tocItemActivePipeHeight = 20;
const style = {
    tocItem_anchor: {
        color: (config) => {
            return config.foregroundColor;
        },
        textDecoration: "none",
        display: "block",
        paddingLeft: toPx(48),
        lineHeight: toPx(38),
        border: `${toPx(1)} solid transparent`,
        outline: "0",
        "&:hover": {
            backgroundColor: "rgba(0, 0, 0, 0.04)"
        },
        "&:focus": {
            border: (config) => {
                return `${toPx(1)} solid ${config.brandColor || devSiteDesignSystemDefaults.brandColor}`;
            }
        }
    },
    tocItem: {
        display: "block",
        position: "relative",
        color: (config) => {
            return config.foregroundColor;
        }
    },
    tocItem__active: {
        background: (config) => {
            return config.backgroundColor;
        },
        color: (config) => {
            return config.foregroundColor;
        },
        boxShadow: `${toPx(-2)} ${toPx(2)} ${toPx(4)} rgba(0, 0, 0, 0.06)`,
        "&::before": {
            content: "''",
            width: toPx(2),
            height: toPx(tocItemActivePipeHeight),
            borderRadius: toPx(2),
            display: "block",
            background: (config) => {
                return config.brandColor;
            },
            position: "absolute",
            left: "0",
            top: `calc((100% / 2) - ${toPx(tocItemActivePipeHeight / 2)})`
        },
        "&:hover": {
            backgroundColor: "rgba(0, 0, 0, 0.1)"
        },
    }
};
class TocItem extends React.Component {
    constructor() {
        super(...arguments);
        this.handleButtonClick = () => {
            if (this.props.onToggleExpand) {
                this.props.onToggleExpand();
            }
        };
    }
    render() {
        const type = this.getType();
        return (React.createElement("li", { className: this.getClassNames() }, this.renderType(type)));
    }
    renderLink() {
        return (React.createElement(Link, { to: this.props.to, className: this.props.managedClasses.tocItem_anchor, onClick: this.props.onClick }, this.props.children));
    }
    renderTocMenu() {
        if (this.props.children[1]) {
            return (React.createElement(TocMenu, { controls: this.props.controls, active: this.props.active },
                this.props.children[0],
                this.props.children[1]));
        }
        return React.createElement(React.Fragment, null, this.props.children);
    }
    renderType(type) {
        switch (type) {
            case itemType.link:
                return this.renderLink();
            case itemType.tocMenu:
                return this.renderTocMenu();
        }
        return null;
    }
    getType() {
        return this.props.to
            ? itemType.link
            : itemType.tocMenu;
    }
    getClassNames() {
        const classNames = this.props.managedClasses.tocItem;
        if (this.props.active && this.props.to) {
            return `${classNames} ${this.props.managedClasses.tocItem__active}`;
        }
        return classNames;
    }
}
export default manageJss(style)(TocItem);
//# sourceMappingURL=toc-item.js.map