/*---------------------------------------------------------------------------------------------
* 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
 */
import "./StandardRotationNavigationAid.scss";
import classnames from "classnames";
import * as React from "react";
import { StandardViewId } from "@itwin/core-frontend";
import { RelativePosition } from "@itwin/appui-abstract";
import { ViewportComponentEvents } from "@itwin/imodel-components-react";
import { Icon, Popup } from "@itwin/core-react";
import { containHorizontally, GroupColumn as NZ_Column, ExpandableButton as NZ_Expandable, ToolbarIcon as NZ_Icon, GroupTool as NZ_Item, Group as NZ_Tray, withContainIn, } from "@itwin/appui-layout-react";
import { UiFramework } from "../UiFramework";
import { NavigationAidControl } from "./NavigationAidControl";
// eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
const NZ_ContainedTray = withContainIn(NZ_Tray);
/** A 3D Standard Rotation Navigation Aid control.
 * @alpha
 */
export class StandardRotationNavigationAidControl extends NavigationAidControl {
    constructor(info, options) {
        super(info, options);
        this.reactNode = React.createElement(StandardRotationNavigationAid, null);
    }
}
StandardRotationNavigationAidControl.navigationAidId = "StandardRotationNavigationAid";
/** A 3D Standard Rotation Navigation Aid.
 * @alpha
 */
export class StandardRotationNavigationAid extends React.Component {
    constructor(props) {
        super(props);
        this._title = 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 }), () => ViewportComponentEvents.setStandardRotation(selected));
        };
        const list = [
            {
                label: UiFramework.translate("rotations.top"),
                iconClassName: "icon-cube-faces-top",
            }, {
                label: UiFramework.translate("rotations.bottom"),
                iconClassName: "icon-cube-faces-bottom",
            }, {
                label: UiFramework.translate("rotations.left"),
                iconClassName: "icon-cube-faces-left",
            }, {
                label: UiFramework.translate("rotations.right"),
                iconClassName: "icon-cube-faces-right",
            }, {
                label: UiFramework.translate("rotations.front"),
                iconClassName: "icon-cube-faces-front",
            }, {
                label: UiFramework.translate("rotations.rear"),
                iconClassName: "icon-cube-faces-rear",
            }, {
                label: UiFramework.translate("rotations.isoLeft"),
                iconClassName: "icon-cube-faces-iso-left",
            }, {
                label: UiFramework.translate("rotations.isoRight"),
                iconClassName: "icon-cube-faces-iso-right",
            },
        ];
        this.state = {
            element: null,
            isExpanded: false,
            list,
            selected: StandardViewId.Top,
        };
    }
    render() {
        const className = classnames("uifw-standard-rotation-navigation", this.props.className);
        return (React.createElement("div", { className: className, style: this.props.style, ref: this._handleRef },
            React.createElement(NZ_Expandable, { className: "expandable" },
                React.createElement(NZ_Icon, { className: "icon-button", icon: React.createElement("span", { className: classnames("three-d-icon", "icon", this.state.list[this.state.selected].iconClassName) }), onClick: this._toggleIsExpanded, title: this._title })),
            React.createElement(Popup, { isOpen: this.state.isExpanded, offset: 0, onClose: this._handlePopupClose, position: RelativePosition.Bottom, target: this.state.element }, this.getExpandedContent())));
    }
    getExpandedContent() {
        if (!this.state.isExpanded)
            return undefined;
        return (React.createElement(NZ_ContainedTray, { containFn: containHorizontally, columns: React.createElement(NZ_Column, null,
                " ",
                this.state.list.map((item, itemIndex) => {
                    return (React.createElement(NZ_Item, { key: itemIndex.toString(), ref: itemIndex.toString(), label: item.label, icon: React.createElement(Icon, { iconSpec: item.iconClassName }), isActive: this.state.selected === itemIndex, onClick: () => this._handleListItemClicked(itemIndex) }));
                })) }));
    }
}
//# sourceMappingURL=StandardRotationNavigationAid.js.map