/**
 * DevExtreme (cjs/ui/diagram/ui.diagram.toolbox.js)
 * Version: 24.1.7-build-24272-1937
 * Build date: Sat Sep 28 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
exports.default = void 0;
var _size = require("../../core/utils/size");
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _extend = require("../../core/utils/extend");
var _window = require("../../core/utils/window");
var _deferred = require("../../core/utils/deferred");
var _message = _interopRequireDefault(require("../../localization/message"));
var _text_box = _interopRequireDefault(require("../text_box"));
var _accordion = _interopRequireDefault(require("../accordion"));
var _scroll_view = _interopRequireDefault(require("../scroll_view"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _diagram = require("./diagram.importer");
var _uiDiagram = _interopRequireDefault(require("./ui.diagram.floating_panel"));

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}
const DIAGRAM_TOOLBOX_MIN_HEIGHT = 130;
const DIAGRAM_TOOLBOX_POPUP_CLASS = "dx-diagram-toolbox-popup";
const DIAGRAM_TOOLBOX_PANEL_CLASS = "dx-diagram-toolbox-panel";
const DIAGRAM_TOOLBOX_INPUT_CONTAINER_CLASS = "dx-diagram-toolbox-input-container";
const DIAGRAM_TOOLBOX_INPUT_CLASS = "dx-diagram-toolbox-input";
const DIAGRAM_TOOLTIP_DATATOGGLE = "shape-toolbox-tooltip";
const DIAGRAM_TOOLBOX_START_DRAG_CLASS = ".dxdi-tb-start-drag-flag";
class DiagramToolbox extends _uiDiagram.default {
    _init() {
        super._init();
        this._toolboxes = [];
        this._filterText = "";
        this._createOnShapeCategoryRenderedAction();
        this._createOnFilterChangedAction()
    }
    _getPopupClass() {
        return "dx-diagram-toolbox-popup"
    }
    _getPopupHeight() {
        return this.isMobileView() ? "100%" : super._getPopupHeight()
    }
    _getPopupMaxHeight() {
        return this.isMobileView() ? "100%" : super._getPopupMaxHeight()
    }
    _getPopupMinHeight() {
        return 130
    }
    _getPopupPosition() {
        const $parent = this.option("offsetParent");
        const position = {
            my: "left top",
            at: "left top",
            of: $parent
        };
        if (!this.isMobileView()) {
            return (0, _extend.extend)(position, {
                offset: this.option("offsetX") + " " + this.option("offsetY")
            })
        }
        return position
    }
    _getPopupAnimation() {
        const $parent = this.option("offsetParent");
        if (this.isMobileView()) {
            return {
                hide: this._getPopupSlideAnimationObject({
                    direction: "left",
                    from: {
                        position: {
                            my: "left top",
                            at: "left top",
                            of: $parent
                        }
                    },
                    to: {
                        position: {
                            my: "right top",
                            at: "left top",
                            of: $parent
                        }
                    }
                }),
                show: this._getPopupSlideAnimationObject({
                    direction: "right",
                    from: {
                        position: {
                            my: "right top",
                            at: "left top",
                            of: $parent
                        }
                    },
                    to: {
                        position: {
                            my: "left top",
                            at: "left top",
                            of: $parent
                        }
                    }
                })
            }
        }
        return super._getPopupAnimation()
    }
    _getPopupOptions() {
        const options = super._getPopupOptions();
        if (!this.isMobileView()) {
            return (0, _extend.extend)(options, {
                showTitle: true,
                toolbarItems: [{
                    widget: "dxButton",
                    location: "center",
                    options: {
                        activeStateEnabled: false,
                        focusStateEnabled: false,
                        hoverStateEnabled: false,
                        icon: "diagram-toolbox-drag",
                        stylingMode: "outlined",
                        type: "normal"
                    }
                }]
            })
        }
        return options
    }
    _renderPopupContent($parent) {
        let panelHeight = "100%";
        if (this.option("showSearch")) {
            const $inputContainer = (0, _renderer.default)("<div>").addClass("dx-diagram-toolbox-input-container").appendTo($parent);
            this._updateElementWidth($inputContainer);
            this._renderSearchInput($inputContainer);
            if ((0, _window.hasWindow)()) {
                panelHeight = "calc(100% - " + (0, _size.getHeight)(this._searchInput.$element()) + "px)"
            }
        }
        const $panel = (0, _renderer.default)("<div>").addClass("dx-diagram-toolbox-panel").appendTo($parent);
        (0, _size.setHeight)($panel, panelHeight);
        this._updateElementWidth($panel);
        this._renderScrollView($panel)
    }
    _updateElementWidth($element) {
        if (void 0 !== this.option("toolboxWidth")) {
            $element.css("width", this.option("toolboxWidth"))
        }
    }
    updateMaxHeight() {
        if (this.isMobileView()) {
            return
        }
        let maxHeight = 6;
        if (this._popup) {
            const $title = this._getPopupTitle();
            maxHeight += (0, _size.getOuterHeight)($title)
        }
        if (this._accordion) {
            maxHeight += (0, _size.getOuterHeight)(this._accordion.$element())
        }
        if (this._searchInput) {
            maxHeight += (0, _size.getOuterHeight)(this._searchInput.$element())
        }
        this.option("maxHeight", maxHeight)
    }
    _renderSearchInput($parent) {
        const $input = (0, _renderer.default)("<div>").addClass("dx-diagram-toolbox-input").appendTo($parent);
        this._searchInput = this._createComponent($input, _text_box.default, {
            stylingMode: "outlined",
            placeholder: _message.default.format("dxDiagram-uiSearch"),
            onValueChanged: data => {
                this._onInputChanged(data.value)
            },
            valueChangeEvent: "keyup",
            buttons: [{
                name: "search",
                location: "after",
                options: {
                    activeStateEnabled: false,
                    focusStateEnabled: false,
                    hoverStateEnabled: false,
                    icon: "search",
                    stylingMode: "outlined",
                    type: "normal",
                    onClick: () => {
                        this._searchInput.focus()
                    }
                }
            }]
        })
    }
    _renderScrollView($parent) {
        const $scrollViewWrapper = (0, _renderer.default)("<div>").appendTo($parent);
        this._scrollView = this._createComponent($scrollViewWrapper, _scroll_view.default);
        const _moveIsAllowed = this._scrollView._moveIsAllowed.bind(this._scrollView);
        this._scrollView._moveIsAllowed = e => {
            for (let i = 0; i < this._toolboxes.length; i++) {
                const $element = this._toolboxes[i];
                if ((0, _renderer.default)($element).children(".dxdi-tb-start-drag-flag").length) {
                    return false
                }
            }
            return _moveIsAllowed(e)
        };
        const $accordion = (0, _renderer.default)("<div>").appendTo(this._scrollView.content());
        this._updateElementWidth($accordion);
        this._renderAccordion($accordion)
    }
    _getAccordionDataSource() {
        const result = [];
        const toolboxGroups = this.option("toolboxGroups");
        for (let i = 0; i < toolboxGroups.length; i++) {
            const category = toolboxGroups[i].category;
            const title = toolboxGroups[i].title;
            const groupObj = {
                category: category,
                title: title || category,
                expanded: toolboxGroups[i].expanded,
                displayMode: toolboxGroups[i].displayMode,
                shapes: toolboxGroups[i].shapes,
                onTemplate: (widget, $element, data) => {
                    const $toolboxElement = (0, _renderer.default)($element);
                    this._onShapeCategoryRenderedAction({
                        category: data.category,
                        displayMode: data.displayMode,
                        dataToggle: "shape-toolbox-tooltip",
                        shapes: data.shapes,
                        $element: $toolboxElement
                    });
                    this._toolboxes.push($toolboxElement);
                    if ("" !== this._filterText) {
                        this._onFilterChangedAction({
                            text: this._filterText,
                            filteringToolboxes: this._toolboxes.length - 1
                        })
                    }
                    this._createTooltips($toolboxElement)
                }
            };
            result.push(groupObj)
        }
        return result
    }
    _createTooltips($toolboxElement) {
        if (this._isTouchMode()) {
            return
        }
        const targets = $toolboxElement.find('[data-toggle="shape-toolbox-tooltip"]');
        const $container = this.$element();
        targets.each(((index, element) => {
            const $target = (0, _renderer.default)(element);
            const title = $target.attr("title");
            if (title) {
                const $tooltip = (0, _renderer.default)("<div>").text(title).appendTo($container);
                this._createComponent($tooltip, _tooltip.default, {
                    target: $target.get(0),
                    showEvent: "mouseenter",
                    hideEvent: "mouseleave",
                    position: "top",
                    animation: {
                        show: {
                            type: "fade",
                            from: 0,
                            to: 1,
                            delay: 500
                        },
                        hide: {
                            type: "fade",
                            from: 1,
                            to: 0,
                            delay: 100
                        }
                    }
                })
            }
        }))
    }
    _isTouchMode() {
        const {
            Browser: Browser
        } = (0, _diagram.getDiagram)();
        return Browser.TouchUI
    }
    _renderAccordion($container) {
        this._accordion = this._createComponent($container, _accordion.default, {
            multiple: true,
            animationDuration: 0,
            activeStateEnabled: false,
            focusStateEnabled: false,
            hoverStateEnabled: false,
            collapsible: true,
            displayExpr: "title",
            dataSource: this._getAccordionDataSource(),
            disabled: this.option("disabled"),
            itemTemplate: (data, index, $element) => {
                data.onTemplate(this, $element, data)
            },
            onSelectionChanged: e => {
                this._updateScrollAnimateSubscription(e.component)
            },
            onContentReady: e => {
                e.component.option("selectedItems", []);
                const items = e.component.option("dataSource");
                for (let i = 0; i < items.length; i++) {
                    if (false === items[i].expanded) {
                        e.component.collapseItem(i)
                    } else if (true === items[i].expanded) {
                        e.component.expandItem(i)
                    }
                }
                if (items.length && void 0 === items[0].expanded) {
                    e.component.expandItem(0)
                }
                this._updateScrollAnimateSubscription(e.component)
            }
        })
    }
    _updateScrollAnimateSubscription(component) {
        component._deferredAnimate = new _deferred.Deferred;
        component._deferredAnimate.done((() => {
            this.updateMaxHeight();
            this._scrollView.update();
            this._updateScrollAnimateSubscription(component)
        }))
    }
    _onInputChanged(text) {
        this._filterText = text;
        this._onFilterChangedAction({
            text: this._filterText,
            filteringToolboxes: this._toolboxes.map((($element, index) => index))
        });
        this.updateTooltips();
        this.updateMaxHeight();
        this._scrollView.update()
    }
    updateFilter() {
        this._onInputChanged(this._filterText)
    }
    updateTooltips() {
        this._toolboxes.forEach(($element => {
            const $tooltipContainer = (0, _renderer.default)($element);
            this._createTooltips($tooltipContainer)
        }))
    }
    _createOnShapeCategoryRenderedAction() {
        this._onShapeCategoryRenderedAction = this._createActionByOption("onShapeCategoryRendered")
    }
    _createOnFilterChangedAction() {
        this._onFilterChangedAction = this._createActionByOption("onFilterChanged")
    }
    _optionChanged(args) {
        switch (args.name) {
            case "onShapeCategoryRendered":
                this._createOnShapeCategoryRenderedAction();
                break;
            case "onFilterChanged":
                this._createOnFilterChangedAction();
                break;
            case "showSearch":
            case "toolboxWidth":
                this._invalidate();
                break;
            case "toolboxGroups":
                this._accordion.option("dataSource", this._getAccordionDataSource());
                break;
            default:
                super._optionChanged(args)
        }
    }
}
var _default = exports.default = DiagramToolbox;
module.exports = exports.default;
module.exports.default = exports.default;
