import React, { useEffect, useState } from "react";
import ButtonRow from "../../common/ButtonRow";
const LeftNav = (props) => {
    const [activeSection, setActiveSection] = useState("General");
    const doSetActiveSection = (name) => {
        const tmpActiveSection = props.getValue(["activeSection"]);
        if (tmpActiveSection !== name) {
            setActiveSection(name);
            props.setValue(["activeSection"], name);
            props.setActiveEntry(name);
        }
    };
    useEffect(() => {
        if (props.activeSection !== activeSection) {
            doSetActiveSection(props.activeSection);
        }
    }, [props.activeSection]);
    return (React.createElement("div", { className: "complex-menu-left-nav-preference", role: "tablist" },
        React.createElement("div", { className: "complex-menu-left-nav-header", role: "header", "aria-level": 1 }, "Preferences"),
        props.entries.map((entry) => {
            let sectionToggleClasses = "complex-menu-section-toggle";
            if (entry === activeSection) {
                sectionToggleClasses = `${sectionToggleClasses} active-section-toggle`;
            }
            return (React.createElement("div", { key: entry, style: { height: 35 } },
                React.createElement(ButtonRow, { className: sectionToggleClasses, label: entry, role: "tab", ariaSelected: entry === activeSection, onClick: () => {
                        doSetActiveSection(entry);
                    } })));
        })));
};
export default LeftNav;
//# sourceMappingURL=LeftNav.js.map