/*---------------------------------------------------------------------------------------------
 * 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 { IconSpecUtilities, RelativePosition, ToolbarItemUtilities, } from "@itwin/appui-abstract";
import { ViewportComponentEvents } from "@itwin/imodel-components-react";
import { Icon, Popup } from "@itwin/core-react";
import { ExpandableButton as NZ_Expandable, ToolbarIcon as NZ_Icon, } from "@itwin/appui-layout-react";
import { UiFramework } from "../UiFramework";
import { NavigationAidControl } from "./NavigationAidControl";
import { Columns, GroupColumn, GroupTool, Panel, } from "@itwin/components-react";
import svgCubeFacesTop from "@bentley/icons-generic/icons/cube-faces/top.svg";
import svgCubeFacesBottom from "@bentley/icons-generic/icons/cube-faces/bottom.svg";
import svgCubeFacesLeft from "@bentley/icons-generic/icons/cube-faces/left.svg";
import svgCubeFacesRight from "@bentley/icons-generic/icons/cube-faces/right.svg";
import svgCubeFacesFront from "@bentley/icons-generic/icons/cube-faces/front.svg";
import svgCubeFacesRear from "@bentley/icons-generic/icons/cube-faces/rear.svg";
import svgCubeFacesIsoLeft from "@bentley/icons-generic/icons/cube-faces/iso-left.svg";
import svgCubeFacesIsoRight from "@bentley/icons-generic/icons/cube-faces/iso-right.svg";
/** A 3D Standard Rotation Navigation Aid control.
 * @alpha
 */
class StandardRotationNavigationAidControl extends NavigationAidControl {
    constructor(info, options) {
        super(info, options);
        this.reactNode = React.createElement(StandardRotationNavigationAid, null);
    }
}
StandardRotationNavigationAidControl.navigationAidId = "StandardRotationNavigationAid";
export { StandardRotationNavigationAidControl };
/** 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"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesTop),
            },
            {
                label: UiFramework.translate("rotations.bottom"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesBottom),
            },
            {
                label: UiFramework.translate("rotations.left"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesLeft),
            },
            {
                label: UiFramework.translate("rotations.right"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesRight),
            },
            {
                label: UiFramework.translate("rotations.front"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesFront),
            },
            {
                label: UiFramework.translate("rotations.rear"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesRear),
            },
            {
                label: UiFramework.translate("rotations.isoLeft"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesIsoLeft),
            },
            {
                label: UiFramework.translate("rotations.isoRight"),
                iconsSpec: IconSpecUtilities.createWebComponentIconSpec(svgCubeFacesIsoRight),
            },
        ];
        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") },
                        React.createElement(Icon, { iconSpec: this.state.list[this.state.selected].iconsSpec })), 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(Panel, null,
            React.createElement(Columns, null,
                React.createElement(GroupColumn, null, this.state.list.map((item, itemIndex) => {
                    return (React.createElement(GroupTool, { key: itemIndex.toString(), label: item.label, icon: React.createElement(Icon, { iconSpec: item.iconsSpec }), isActive: this.state.selected === itemIndex, onClick: () => this._handleListItemClicked(itemIndex), item: ToolbarItemUtilities.createActionButton("", 0, "", "", () => { }) }));
                })))));
    }
}
//# sourceMappingURL=StandardRotationNavigationAid.js.map