/**
 * DevExtreme (cjs/ui/switch.js)
 * Version: 23.2.6 (build 24140-0112)
 * Build date: Sun May 19 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 _events_engine = _interopRequireDefault(require("../events/core/events_engine"));
var _devices = _interopRequireDefault(require("../core/devices"));
var _extend = require("../core/utils/extend");
var _component_registrator = _interopRequireDefault(require("../core/component_registrator"));
var _editor = _interopRequireDefault(require("./editor/editor"));
var _index = require("../events/utils/index");
var _emitter = require("../events/core/emitter.feedback");
var _position = require("../core/utils/position");
var _fx = _interopRequireDefault(require("../animation/fx"));
var _message = _interopRequireDefault(require("../localization/message"));
var _click = require("../events/click");
var _swipeable = _interopRequireDefault(require("../events/gesture/swipeable"));
var _deferred = require("../core/utils/deferred");

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}
const SWITCH_CLASS = "dx-switch";
const SWITCH_WRAPPER_CLASS = "dx-switch-wrapper";
const SWITCH_CONTAINER_CLASS = "dx-switch-container";
const SWITCH_INNER_CLASS = "dx-switch-inner";
const SWITCH_HANDLE_CLASS = "dx-switch-handle";
const SWITCH_ON_VALUE_CLASS = "dx-switch-on-value";
const SWITCH_ON_CLASS = "dx-switch-on";
const SWITCH_OFF_CLASS = "dx-switch-off";
const SWITCH_ANIMATION_DURATION = 100;
const Switch = _editor.default.inherit({
    _supportedKeys: function() {
        const isRTL = this.option("rtlEnabled");
        const click = function(e) {
            e.preventDefault();
            this._clickAction({
                event: e
            })
        };
        const move = function(value, e) {
            e.preventDefault();
            e.stopPropagation();
            this._saveValueChangeEvent(e);
            this._animateValue(value)
        };
        return (0, _extend.extend)(this.callBase(), {
            space: click,
            enter: click,
            leftArrow: move.bind(this, isRTL ? true : false),
            rightArrow: move.bind(this, isRTL ? false : true)
        })
    },
    _useTemplates: function() {
        return false
    },
    _getDefaultOptions: function() {
        return (0, _extend.extend)(this.callBase(), {
            hoverStateEnabled: true,
            activeStateEnabled: true,
            switchedOnText: _message.default.format("dxSwitch-switchedOnText"),
            switchedOffText: _message.default.format("dxSwitch-switchedOffText"),
            value: false
        })
    },
    _defaultOptionsRules: function() {
        return this.callBase().concat([{
            device: function() {
                return "desktop" === _devices.default.real().deviceType && !_devices.default.isSimulator()
            },
            options: {
                focusStateEnabled: true
            }
        }])
    },
    _feedbackHideTimeout: 0,
    _animating: false,
    _initMarkup: function() {
        this._renderContainers();
        this.$element().addClass("dx-switch").append(this._$switchWrapper);
        this._renderSubmitElement();
        this._renderClick();
        this.setAria("role", "button");
        this._renderSwipeable();
        this.callBase();
        this._renderSwitchInner();
        this._renderLabels();
        this._renderValue()
    },
    _getInnerOffset: function(value, offset) {
        const ratio = (offset - this._offsetDirection() * Number(!value)) / 2;
        return 100 * ratio + "%"
    },
    _getHandleOffset: function(value, offset) {
        if (this.option("rtlEnabled")) {
            value = !value
        }
        if (value) {
            const calcValue = 100 * -offset - 100;
            return calcValue + "%"
        } else {
            return 100 * -offset + "%"
        }
    },
    _renderSwitchInner: function() {
        this._$switchInner = (0, _renderer.default)("<div>").addClass("dx-switch-inner").appendTo(this._$switchContainer);
        this._$handle = (0, _renderer.default)("<div>").addClass("dx-switch-handle").appendTo(this._$switchInner)
    },
    _renderLabels: function() {
        this._$labelOn = (0, _renderer.default)("<div>").addClass("dx-switch-on").prependTo(this._$switchInner);
        this._$labelOff = (0, _renderer.default)("<div>").addClass("dx-switch-off").appendTo(this._$switchInner);
        this._setLabelsText()
    },
    _renderContainers: function() {
        this._$switchContainer = (0, _renderer.default)("<div>").addClass("dx-switch-container");
        this._$switchWrapper = (0, _renderer.default)("<div>").addClass("dx-switch-wrapper").append(this._$switchContainer)
    },
    _renderSwipeable: function() {
        this._createComponent(this.$element(), _swipeable.default, {
            elastic: false,
            immediate: true,
            onStart: this._swipeStartHandler.bind(this),
            onUpdated: this._swipeUpdateHandler.bind(this),
            onEnd: this._swipeEndHandler.bind(this),
            itemSizeFunc: this._getItemSizeFunc.bind(this)
        })
    },
    _getItemSizeFunc: function() {
        return (0, _size.getOuterWidth)(this._$switchContainer, true) - (0, _position.getBoundingRect)(this._$handle.get(0)).width
    },
    _renderSubmitElement: function() {
        this._$submitElement = (0, _renderer.default)("<input>").attr("type", "hidden").appendTo(this.$element())
    },
    _getSubmitElement: function() {
        return this._$submitElement
    },
    _offsetDirection: function() {
        return this.option("rtlEnabled") ? -1 : 1
    },
    _renderPosition: function(state, swipeOffset) {
        const innerOffset = this._getInnerOffset(state, swipeOffset);
        const handleOffset = this._getHandleOffset(state, swipeOffset);
        this._$switchInner.css("transform", " translateX(" + innerOffset + ")");
        this._$handle.css("transform", " translateX(" + handleOffset + ")")
    },
    _validateValue: function() {
        const check = this.option("value");
        if ("boolean" !== typeof check) {
            this._options.silent("value", !!check)
        }
    },
    _renderClick: function() {
        const eventName = (0, _index.addNamespace)(_click.name, this.NAME);
        const $element = this.$element();
        this._clickAction = this._createAction(this._clickHandler.bind(this));
        _events_engine.default.off($element, eventName);
        _events_engine.default.on($element, eventName, function(e) {
            this._clickAction({
                event: e
            })
        }.bind(this))
    },
    _clickHandler: function(args) {
        const e = args.event;
        this._saveValueChangeEvent(e);
        if (this._animating || this._swiping) {
            return
        }
        this._animateValue(!this.option("value"))
    },
    _animateValue: function(value) {
        const startValue = this.option("value");
        const endValue = value;
        if (startValue === endValue) {
            return
        }
        this._animating = true;
        const fromInnerOffset = this._getInnerOffset(startValue, 0);
        const toInnerOffset = this._getInnerOffset(endValue, 0);
        const fromHandleOffset = this._getHandleOffset(startValue, 0);
        const toHandleOffset = this._getHandleOffset(endValue, 0);
        const that = this;
        const fromInnerConfig = {};
        const toInnerConfig = {};
        const fromHandleConfig = {};
        const toHandlerConfig = {};
        fromInnerConfig.transform = " translateX(" + fromInnerOffset + ")";
        toInnerConfig.transform = " translateX(" + toInnerOffset + ")";
        fromHandleConfig.transform = " translateX(" + fromHandleOffset + ")";
        toHandlerConfig.transform = " translateX(" + toHandleOffset + ")";
        this.$element().toggleClass("dx-switch-on-value", endValue);
        _fx.default.animate(this._$handle, {
            from: fromHandleConfig,
            to: toHandlerConfig,
            duration: 100
        });
        _fx.default.animate(this._$switchInner, {
            from: fromInnerConfig,
            to: toInnerConfig,
            duration: 100,
            complete: function() {
                that._animating = false;
                that.option("value", endValue)
            }
        })
    },
    _swipeStartHandler: function(e) {
        const state = this.option("value");
        const rtlEnabled = this.option("rtlEnabled");
        const maxOffOffset = rtlEnabled ? 0 : 1;
        const maxOnOffset = rtlEnabled ? 1 : 0;
        e.event.maxLeftOffset = state ? maxOffOffset : maxOnOffset;
        e.event.maxRightOffset = state ? maxOnOffset : maxOffOffset;
        this._swiping = true;
        this._feedbackDeferred = new _deferred.Deferred;
        (0, _emitter.lock)(this._feedbackDeferred);
        this._toggleActiveState(this.$element(), this.option("activeStateEnabled"))
    },
    _swipeUpdateHandler: function(e) {
        this._renderPosition(this.option("value"), e.event.offset)
    },
    _swipeEndHandler: function(e) {
        const that = this;
        const offsetDirection = this._offsetDirection();
        const toInnerConfig = {};
        const toHandleConfig = {};
        const innerOffset = this._getInnerOffset(that.option("value"), e.event.targetOffset);
        const handleOffset = this._getHandleOffset(that.option("value"), e.event.targetOffset);
        toInnerConfig.transform = " translateX(" + innerOffset + ")";
        toHandleConfig.transform = " translateX(" + handleOffset + ")";
        _fx.default.animate(this._$handle, {
            to: toHandleConfig,
            duration: 100
        });
        _fx.default.animate(this._$switchInner, {
            to: toInnerConfig,
            duration: 100,
            complete: function() {
                that._swiping = false;
                const pos = that.option("value") + offsetDirection * e.event.targetOffset;
                that._saveValueChangeEvent(e.event);
                that.option("value", Boolean(pos));
                that._feedbackDeferred.resolve();
                that._toggleActiveState(that.$element(), false)
            }
        })
    },
    _renderValue: function() {
        this._validateValue();
        const val = this.option("value");
        this._renderPosition(val, 0);
        this.$element().toggleClass("dx-switch-on-value", val);
        this._getSubmitElement().val(val);
        this.setAria({
            pressed: val,
            label: val ? this.option("switchedOnText") : this.option("switchedOffText")
        })
    },
    _setLabelsText: function() {
        this._$labelOn && this._$labelOn.text(this.option("switchedOnText"));
        this._$labelOff && this._$labelOff.text(this.option("switchedOffText"))
    },
    _visibilityChanged: function(visible) {
        if (visible) {
            this.repaint()
        }
    },
    _optionChanged: function(args) {
        switch (args.name) {
            case "width":
                delete this._marginBound;
                this._refresh();
                break;
            case "switchedOnText":
            case "switchedOffText":
                this._setLabelsText();
                break;
            case "value":
                this._renderValue();
                this.callBase(args);
                break;
            default:
                this.callBase(args)
        }
    }
});
(0, _component_registrator.default)("dxSwitch", Switch);
var _default = Switch;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;
