"use strict";
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module NavigationAids
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.StandardRotationNavigationAid = exports.StandardRotationNavigationAidControl = void 0;
require("./StandardRotationNavigationAid.scss");
const classnames_1 = require("classnames");
const React = require("react");
const core_frontend_1 = require("@itwin/core-frontend");
const appui_abstract_1 = require("@itwin/appui-abstract");
const imodel_components_react_1 = require("@itwin/imodel-components-react");
const core_react_1 = require("@itwin/core-react");
const appui_layout_react_1 = require("@itwin/appui-layout-react");
const UiFramework_1 = require("../UiFramework");
const NavigationAidControl_1 = require("./NavigationAidControl");
// eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
const NZ_ContainedTray = (0, appui_layout_react_1.withContainIn)(appui_layout_react_1.Group);
/** A 3D Standard Rotation Navigation Aid control.
 * @alpha
 */
class StandardRotationNavigationAidControl extends NavigationAidControl_1.NavigationAidControl {
    constructor(info, options) {
        super(info, options);
        this.reactNode = React.createElement(StandardRotationNavigationAid, null);
    }
}
exports.StandardRotationNavigationAidControl = StandardRotationNavigationAidControl;
StandardRotationNavigationAidControl.navigationAidId = "StandardRotationNavigationAid";
/** A 3D Standard Rotation Navigation Aid.
 * @alpha
 */
class StandardRotationNavigationAid extends React.Component {
    constructor(props) {
        super(props);
        this._title = UiFramework_1.UiFramework.translate("standardRotationNavigationAid.title");
        this._handleRef = (element) => {
            this.setState(() => ({ element }));
        };
        this._handlePopupClose = () => {
            this.setState(() => ({ isExpanded: false }));
        };
        this._toggleIsExpanded = () => {
            this.setState((prevState) => ({ isExpanded: !prevState.isExpanded }));
        };
        this._handleListItemClicked = (item) => {
            const selected = item;
            this.setState(() => ({ isExpanded: false, selected }), () => imodel_components_react_1.ViewportComponentEvents.setStandardRotation(selected));
        };
        const list = [
            {
                label: UiFramework_1.UiFramework.translate("rotations.top"),
                iconClassName: "icon-cube-faces-top",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.bottom"),
                iconClassName: "icon-cube-faces-bottom",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.left"),
                iconClassName: "icon-cube-faces-left",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.right"),
                iconClassName: "icon-cube-faces-right",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.front"),
                iconClassName: "icon-cube-faces-front",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.rear"),
                iconClassName: "icon-cube-faces-rear",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.isoLeft"),
                iconClassName: "icon-cube-faces-iso-left",
            }, {
                label: UiFramework_1.UiFramework.translate("rotations.isoRight"),
                iconClassName: "icon-cube-faces-iso-right",
            },
        ];
        this.state = {
            element: null,
            isExpanded: false,
            list,
            selected: core_frontend_1.StandardViewId.Top,
        };
    }
    render() {
        const className = (0, classnames_1.default)("uifw-standard-rotation-navigation", this.props.className);
        return (React.createElement("div", { className: className, style: this.props.style, ref: this._handleRef },
            React.createElement(appui_layout_react_1.ExpandableButton, { className: "expandable" },
                React.createElement(appui_layout_react_1.ToolbarIcon, { className: "icon-button", icon: React.createElement("span", { className: (0, classnames_1.default)("three-d-icon", "icon", this.state.list[this.state.selected].iconClassName) }), onClick: this._toggleIsExpanded, title: this._title })),
            React.createElement(core_react_1.Popup, { isOpen: this.state.isExpanded, offset: 0, onClose: this._handlePopupClose, position: appui_abstract_1.RelativePosition.Bottom, target: this.state.element }, this.getExpandedContent())));
    }
    getExpandedContent() {
        if (!this.state.isExpanded)
            return undefined;
        return (React.createElement(NZ_ContainedTray, { containFn: appui_layout_react_1.containHorizontally, columns: React.createElement(appui_layout_react_1.GroupColumn, null,
                " ",
                this.state.list.map((item, itemIndex) => {
                    return (React.createElement(appui_layout_react_1.GroupTool, { key: itemIndex.toString(), ref: itemIndex.toString(), label: item.label, icon: React.createElement(core_react_1.Icon, { iconSpec: item.iconClassName }), isActive: this.state.selected === itemIndex, onClick: () => this._handleListItemClicked(itemIndex) }));
                })) }));
    }
}
exports.StandardRotationNavigationAid = StandardRotationNavigationAid;
//# sourceMappingURL=StandardRotationNavigationAid.js.map