"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 StatusBar
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.SectionsStatusField = void 0;
require("./SectionsField.scss");
const classnames_1 = require("classnames");
const React = require("react");
const appui_layout_react_1 = require("@itwin/appui-layout-react");
const core_frontend_1 = require("@itwin/core-frontend");
const itwinui_react_1 = require("@itwin/itwinui-react");
const useActiveViewport_1 = require("../hooks/useActiveViewport");
const UiFramework_1 = require("../UiFramework");
const LabelIndicator_1 = require("../statusbar/LabelIndicator");
const section_tool_svg_1 = require("@bentley/icons-generic/icons/section-tool.svg");
/** Status Field for showing section extra tools for clearing and showing manipulators
 * @beta
 */
function SectionsStatusField(props) {
    const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [
        UiFramework_1.UiFramework.translate("tools.sectionTools"),
        UiFramework_1.UiFramework.translate("tools.sectionClear"),
        UiFramework_1.UiFramework.translate("tools.sectionShowHandles"),
    ], []);
    const activeViewport = (0, useActiveViewport_1.useActiveViewport)();
    const [showIndicator, setShowIndicator] = React.useState(false);
    const [isPopupOpen, setPopupOpen] = React.useState(false);
    const targetDiv = React.useRef(null);
    const classes = showIndicator ? "uifw-field-fade-in" : "uifw-field-fade-out";
    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
    React.useEffect(() => {
        // istanbul ignore next
        const onClipChanged = (viewport, _eventType, _provider) => {
            if (viewport !== activeViewport)
                return;
            setHasManipulatorsShown(!!core_frontend_1.ViewClipDecoration.get(activeViewport));
            const isClipActive = !!activeViewport.view.getViewClip();
            setShowIndicator(isClipActive || !props.hideWhenUnused);
        };
        const clipActive = !!activeViewport &&
            /* istanbul ignore next */ !!activeViewport.view.getViewClip();
        setShowIndicator(clipActive || !props.hideWhenUnused);
        setHasManipulatorsShown(clipActive &&
            /* istanbul ignore next */ !!activeViewport &&
            /* istanbul ignore next */ !!core_frontend_1.ViewClipDecoration.get(activeViewport));
        core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
        return () => {
            // Get or create static ViewClipDecorationProvider
            core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
        };
    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
    // istanbul ignore next
    const toggleManipulators = async (e) => {
        if (activeViewport) {
            setHasManipulatorsShown(e.target.checked);
            await core_frontend_1.ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
        }
    };
    // istanbul ignore next
    const handleClear = async () => {
        await core_frontend_1.IModelApp.tools.run(core_frontend_1.ViewClipClearTool.toolId, core_frontend_1.ViewClipDecorationProvider.create());
        setPopupOpen(false);
    };
    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator && (React.createElement(React.Fragment, null,
        React.createElement("div", { ref: targetDiv, title: toolTip },
            React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { className: classes, iconSpec: section_tool_svg_1.default, onClick: () => setPopupOpen(!isPopupOpen) })),
        React.createElement(appui_layout_react_1.FooterPopup, { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
            React.createElement(appui_layout_react_1.Dialog, { titleBar: React.createElement(appui_layout_react_1.TitleBar, { title: toolTip }) },
                React.createElement("div", { className: "uifw-sections-footer-contents" },
                    React.createElement(itwinui_react_1.Button, { onClick: handleClear }, clearLabel),
                    React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
                        React.createElement("div", { className: (0, classnames_1.default)("uifw-sections-label") }, showHandlesLabel),
                        React.createElement(itwinui_react_1.ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown })))))))));
}
exports.SectionsStatusField = SectionsStatusField;
//# sourceMappingURL=SectionsField.js.map