/**
 * DevExtreme (esm/__internal/ui/text_box/m_text_box.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/
 */
import registerComponent from "../../../core/component_registrator";
import $ from "../../../core/renderer";
import {
    extend
} from "../../../core/utils/extend";
import {
    getOuterWidth,
    getWidth
} from "../../../core/utils/size";
import {
    getWindow
} from "../../../core/utils/window";
import {
    normalizeKeyName
} from "../../../events/utils/index";
import TextEditor from "./m_text_editor";
const window = getWindow();
const ignoreKeys = ["backspace", "tab", "enter", "pageUp", "pageDown", "end", "home", "leftArrow", "rightArrow", "downArrow", "upArrow", "del"];
const TEXTBOX_CLASS = "dx-textbox";
const SEARCHBOX_CLASS = "dx-searchbox";
const ICON_CLASS = "dx-icon";
const SEARCH_ICON_CLASS = "dx-icon-search";
const TextBox = TextEditor.inherit({
    ctor(element, options) {
        if (options) {
            this._showClearButton = options.showClearButton
        }
        this.callBase.apply(this, arguments)
    },
    _getDefaultOptions() {
        return extend(this.callBase(), {
            value: "",
            mode: "text",
            maxLength: null
        })
    },
    _initMarkup() {
        this.$element().addClass("dx-textbox");
        this.callBase();
        this.setAria("role", "textbox")
    },
    _renderInputType() {
        this.callBase();
        this._renderSearchMode()
    },
    _useTemplates: () => false,
    _renderProps() {
        this.callBase();
        this._toggleMaxLengthProp()
    },
    _toggleMaxLengthProp() {
        const maxLength = this._getMaxLength();
        if (maxLength && maxLength > 0) {
            this._input().attr("maxLength", maxLength)
        } else {
            this._input().removeAttr("maxLength")
        }
    },
    _renderSearchMode() {
        const $element = this._$element;
        if ("search" === this.option("mode")) {
            $element.addClass("dx-searchbox");
            this._renderSearchIcon();
            if (void 0 === this._showClearButton) {
                this._showClearButton = this.option("showClearButton");
                this.option("showClearButton", true)
            }
        } else {
            $element.removeClass("dx-searchbox");
            this._$searchIcon && this._$searchIcon.remove();
            this.option("showClearButton", void 0 === this._showClearButton ? this.option("showClearButton") : this._showClearButton);
            delete this._showClearButton
        }
    },
    _renderSearchIcon() {
        const $searchIcon = $("<div>").addClass("dx-icon").addClass("dx-icon-search");
        $searchIcon.prependTo(this._input().parent());
        this._$searchIcon = $searchIcon
    },
    _getLabelContainerWidth() {
        if (this._$searchIcon) {
            const $inputContainer = this._input().parent();
            return getWidth($inputContainer) - this._getLabelBeforeWidth()
        }
        return this.callBase()
    },
    _getLabelBeforeWidth() {
        let labelBeforeWidth = this.callBase();
        if (this._$searchIcon) {
            labelBeforeWidth += getOuterWidth(this._$searchIcon)
        }
        return labelBeforeWidth
    },
    _optionChanged(args) {
        switch (args.name) {
            case "maxLength":
                this._toggleMaxLengthProp();
                break;
            case "mode":
                this.callBase(args);
                this._updateLabelWidth();
                break;
            case "mask":
                this.callBase(args);
                this._toggleMaxLengthProp();
                break;
            default:
                this.callBase(args)
        }
    },
    _onKeyDownCutOffHandler(e) {
        const actualMaxLength = this._getMaxLength();
        if (actualMaxLength && !e.ctrlKey && !this._hasSelection()) {
            const $input = $(e.target);
            const key = normalizeKeyName(e);
            this._cutOffExtraChar($input);
            return $input.val().length < actualMaxLength || ignoreKeys.includes(key) || "" !== window.getSelection().toString()
        }
        return true
    },
    _onChangeCutOffHandler(e) {
        const $input = $(e.target);
        if (this.option("maxLength")) {
            this._cutOffExtraChar($input)
        }
    },
    _cutOffExtraChar($input) {
        const actualMaxLength = this._getMaxLength();
        const textInput = $input.val();
        if (actualMaxLength && textInput.length > actualMaxLength) {
            $input.val(textInput.substr(0, actualMaxLength))
        }
    },
    _getMaxLength() {
        const isMaskSpecified = !!this.option("mask");
        return isMaskSpecified ? null : this.option("maxLength")
    }
});
registerComponent("dxTextBox", TextBox);
export default TextBox;
