"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");
const components_react_1 = require("@itwin/components-react");
const top_svg_1 = require("@bentley/icons-generic/icons/cube-faces/top.svg");
const bottom_svg_1 = require("@bentley/icons-generic/icons/cube-faces/bottom.svg");
const left_svg_1 = require("@bentley/icons-generic/icons/cube-faces/left.svg");
const right_svg_1 = require("@bentley/icons-generic/icons/cube-faces/right.svg");
const front_svg_1 = require("@bentley/icons-generic/icons/cube-faces/front.svg");
const rear_svg_1 = require("@bentley/icons-generic/icons/cube-faces/rear.svg");
const iso_left_svg_1 = require("@bentley/icons-generic/icons/cube-faces/iso-left.svg");
const iso_right_svg_1 = require("@bentley/icons-generic/icons/cube-faces/iso-right.svg");
/** 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);
    }
}
StandardRotationNavigationAidControl.navigationAidId = "StandardRotationNavigationAid";
exports.StandardRotationNavigationAidControl = StandardRotationNavigationAidControl;
/** 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"),
                iconsSpec: top_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.bottom"),
                iconsSpec: bottom_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.left"),
                iconsSpec: left_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.right"),
                iconsSpec: right_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.front"),
                iconsSpec: front_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.rear"),
                iconsSpec: rear_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.isoLeft"),
                iconsSpec: iso_left_svg_1.default,
            },
            {
                label: UiFramework_1.UiFramework.translate("rotations.isoRight"),
                iconsSpec: iso_right_svg_1.default,
            },
        ];
        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") },
                        React.createElement(core_react_1.Icon, { iconSpec: this.state.list[this.state.selected].iconsSpec })), 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(components_react_1.Panel, null,
            React.createElement(components_react_1.Columns, null,
                React.createElement(components_react_1.GroupColumn, null, this.state.list.map((item, itemIndex) => {
                    return (React.createElement(components_react_1.GroupTool, { key: itemIndex.toString(), label: item.label, icon: React.createElement(core_react_1.Icon, { iconSpec: item.iconsSpec }), isActive: this.state.selected === itemIndex, onClick: () => this._handleListItemClicked(itemIndex), item: appui_abstract_1.ToolbarItemUtilities.createActionButton("", 0, "", "", () => { }) }));
                })))));
    }
}
exports.StandardRotationNavigationAid = StandardRotationNavigationAid;
//# sourceMappingURL=StandardRotationNavigationAid.js.map