"use strict";
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckBox = void 0;
var react_1 = __importDefault(require("react"));
var bem_react_classname_1 = require("bem-react-classname");
var icons_classic_1 = require("@alfalab/icons-classic");
var cn_1 = require("../cn");
var tag_button_1 = __importDefault(require("../tag-button/tag-button"));
var scroll_to_1 = __importDefault(require("../lib/scroll-to"));
var vars_1 = require("../vars");
/**
 * Компонент чекбокса.
 */
var CheckBox = /** @class */ (function (_super) {
    __extends(CheckBox, _super);
    function CheckBox() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.cn = bem_react_classname_1.createCn('checkbox');
        _this.state = {
            focused: false,
            hovered: false,
            checked: false,
        };
        _this.handleChange = function (event) {
            if (!_this.props.disabled) {
                var nextCheckedValue = !(_this.props.checked === undefined
                    // eslint-disable-next-line react/no-access-state-in-setstate
                    ? _this.state.checked
                    : _this.props.checked);
                _this.setState({ checked: nextCheckedValue });
                if (_this.props.onChange) {
                    _this.props.onChange(nextCheckedValue, _this.props.value, event);
                }
            }
        };
        _this.handleFocus = function (event) {
            _this.setState({ focused: true });
            if (_this.props.onFocus) {
                _this.props.onFocus(event);
            }
        };
        _this.handleUnfocus = function () { return setImmediate(function () { return _this.setState({ focused: false }); }); };
        _this.handleBlur = function (event) {
            _this.setState({ focused: false });
            if (_this.props.onBlur) {
                _this.props.onBlur(event);
            }
        };
        _this.handleMouseEnter = function (event) {
            if (!_this.props.disabled) {
                _this.setState({ hovered: true });
            }
            if (_this.props.onMouseEnter) {
                _this.props.onMouseEnter(event);
            }
        };
        _this.handleMouseLeave = function (event) {
            if (!_this.props.disabled) {
                _this.setState({ hovered: false });
            }
            if (_this.props.onMouseLeave) {
                _this.props.onMouseLeave(event);
            }
        };
        return _this;
    }
    CheckBox.prototype.render = function () {
        var _this = this;
        var checked = this.props.checked === undefined
            ? this.state.checked
            : this.props.checked;
        return (
        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
        react_1.default.createElement("label", { className: this.cn({
                size: this.props.size,
                disabled: this.props.disabled,
                checked: checked || this.props.indeterminate,
                indeterminate: this.props.indeterminate,
                focused: this.state.focused,
                hovered: this.state.hovered,
                width: this.props.type === 'button' ? this.props.width : null,
            }), htmlFor: this.props.id, onBlur: this.handleBlur, onFocus: this.handleFocus, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseDown: this.handleUnfocus, onMouseUp: this.handleUnfocus, ref: function (root) {
                _this.root = root;
            }, "data-test-id": this.props['data-test-id'] }, this.props.type === 'button'
            ? this.renderButtonCheckbox(checked)
            : this.renderNormalCheckbox(checked)));
    };
    CheckBox.prototype.renderNormalCheckbox = function (checked) {
        var TickIcon = icons_classic_1.TickXsIcon;
        var CheckIndeterminateIcon = icons_classic_1.CheckIndeterminateSIcon;
        if (this.props.size === 'l') {
            TickIcon = icons_classic_1.TickSIcon;
            CheckIndeterminateIcon = icons_classic_1.CheckIndeterminateMIcon;
        }
        return [
            react_1.default.createElement("span", { className: this.cn('box'), key: "box" },
                react_1.default.createElement("input", { className: this.cn('control'), type: "checkbox", autoComplete: "off", name: this.props.name, id: this.props.id, value: this.props.value, checked: checked, disabled: this.props.disabled, onClick: this.handleInputControlClick, onChange: this.handleChange }),
                !this.props.indeterminate && (react_1.default.createElement(TickIcon, { className: this.cn('icon') })),
                !checked
                    && this.props.indeterminate && (react_1.default.createElement(CheckIndeterminateIcon, { className: this.cn('icon') })),
                checked
                    && this.props.indeterminate
                    && (react_1.default.createElement(TickIcon, { className: this.cn('icon') }))),
            this.props.text && (react_1.default.createElement("span", { className: this.cn('text'), key: "text", role: "presentation" }, this.props.text)),
        ];
    };
    CheckBox.prototype.renderButtonCheckbox = function (checked) {
        return [
            react_1.default.createElement(tag_button_1.default, { key: "button", togglable: "check", checked: checked, title: this.props.title, disabled: this.props.disabled, size: this.props.size || 'm', width: this.props.type === 'button' ? this.props.width : undefined, focused: this.state.focused, onClick: this.handleChange }, this.props.text ? this.props.text : ''),
            react_1.default.createElement("input", { className: this.cn('control'), key: "control", type: "checkbox", tabIndex: -1, autoComplete: "off", name: this.props.name, id: this.props.id, value: this.props.value, checked: checked, disabled: this.props.disabled, onChange: this.handleChange }),
        ];
    };
    // eslint-disable-next-line class-methods-use-this
    CheckBox.prototype.handleInputControlClick = function (event) {
        event.stopPropagation();
    };
    /**
     * Устанавливает фокус на чекбокс.
     */
    CheckBox.prototype.focus = function () {
        this.root.focus();
    };
    /**
     * Убирает фокус с чекбокса.
     */
    // eslint-disable-next-line class-methods-use-this
    CheckBox.prototype.blur = function () {
        if (document.activeElement) {
            document.activeElement.blur();
        }
    };
    /**
     * Скроллит страницу до чекбокса.
     */
    CheckBox.prototype.scrollTo = function () {
        var elementRect = this.root.getBoundingClientRect();
        scroll_to_1.default({
            // eslint-disable-next-line no-mixed-operators
            targetY: elementRect.top + window.pageYOffset - vars_1.SCROLL_TO_CORRECTION,
        });
    };
    CheckBox.defaultProps = {
        type: 'normal',
        size: 'm',
    };
    return CheckBox;
}(react_1.default.PureComponent));
exports.CheckBox = CheckBox;
exports.default = cn_1.withTheme(CheckBox);

//# sourceMappingURL=checkbox.js.map
