import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _Toggle;
import React from 'react';
import { keyListener } from "../../../lib/events/keyListener";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { cx } from "../../../lib/theming/Emotion";
import { rootNode } from "../../../lib/rootNode";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { isTestEnv } from "../../../lib/currentEnvironment";
import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
import { withSize } from "../../../lib/size/SizeDecorator";
import { styles, globalClasses } from "../Toggle.styles";
export var ToggleDataTids = {
  root: 'Toggle__root'
};

/**
 * `Toggle` переключает состояния. Например, включает или отключает уведомления в настройках.
 * `Toggle` представляет из себя надпись + переключатель.
 *
 * `Toggle` нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.
 */
export var Toggle = rootNode(_class = withSize(_class = (_Toggle = /*#__PURE__*/function (_React$Component) {
  function Toggle(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.getProps = createPropsGetter(Toggle.defaultProps);
    _this.input = null;

    /**
     * @public
     */
    _this.focus = function () {
      if (_this.input) {
        keyListener.isTabPressed = true;
        _this.input.focus();
      }
    };
    _this.inputRef = function (element) {
      _this.input = element;
    };
    _this.handleChange = function (event) {
      if (_this.props.onValueChange) {
        _this.props.onValueChange(event.target.checked);
      }
      if (_this.isUncontrolled()) {
        _this.setState({
          checked: event.target.checked
        });
      }
      if (_this.props.onChange) {
        _this.props.onChange(event);
      }
    };
    _this.handleFocus = function (event) {
      if (_this.props.onFocus) {
        _this.props.onFocus(event);
      }
      if (keyListener.isTabPressed) {
        _this.setState({
          focusByTab: true
        });
      }
    };
    _this.resetFocus = function () {
      return _this.setState({
        focusByTab: false
      });
    };
    _this.handleBlur = function (event) {
      _this.resetFocus();
      _this.props.onBlur == null || _this.props.onBlur(event);
    };
    _this.state = {
      focusByTab: false,
      checked: props.defaultChecked
    };
    return _this;
  }
  _inheritsLoose(Toggle, _React$Component);
  var _proto = Toggle.prototype;
  _proto.componentDidMount = function componentDidMount() {
    if (this.props.autoFocus) {
      keyListener.isTabPressed = true;
      this.focus();
    }
  };
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.getContainerSizeClassName = function getContainerSizeClassName() {
    switch (this.size) {
      case 'large':
        return styles.containerLarge(this.theme);
      case 'medium':
        return styles.containerMedium(this.theme);
      case 'small':
      default:
        return styles.containerSmall(this.theme);
    }
  };
  _proto.getHandleSizeClassName = function getHandleSizeClassName() {
    switch (this.size) {
      case 'large':
        return styles.handleLarge(this.theme);
      case 'medium':
        return styles.handleMedium(this.theme);
      case 'small':
      default:
        return styles.handleSmall(this.theme);
    }
  };
  _proto.getButtonSizeClassName = function getButtonSizeClassName() {
    switch (this.size) {
      case 'large':
        return styles.buttonLarge(this.theme);
      case 'medium':
        return styles.buttonMedium(this.theme);
      case 'small':
      default:
        return styles.buttonSmall(this.theme);
    }
  };
  _proto.getRootSizeClassName = function getRootSizeClassName() {
    switch (this.size) {
      case 'large':
        return styles.rootLarge(this.theme);
      case 'medium':
        return styles.rootMedium(this.theme);
      case 'small':
      default:
        return styles.rootSmall(this.theme);
    }
  };
  _proto.getInputSizeClassName = function getInputSizeClassName() {
    switch (this.size) {
      case 'large':
        return styles.inputLarge(this.theme);
      case 'medium':
        return styles.inputMedium(this.theme);
      case 'small':
      default:
        return styles.inputSmall(this.theme);
    }
  };
  _proto.getCaptionSizeClassName = function getCaptionSizeClassName() {
    switch (this.size) {
      case 'large':
        return styles.captionLarge(this.theme);
      case 'medium':
        return styles.captionMedium(this.theme);
      case 'small':
      default:
        return styles.captionSmall(this.theme);
    }
  };
  _proto.renderMain = function renderMain() {
    var _cx, _cx2, _cx4, _cx5;
    var _this$props = this.props,
      children = _this$props.children,
      warning = _this$props.warning,
      error = _this$props.error,
      id = _this$props.id,
      name = _this$props.name,
      ariaDescribedby = _this$props['aria-describedby'],
      ariaLabel = _this$props['aria-label'];
    var _this$getProps = this.getProps(),
      loading = _this$getProps.loading,
      captionPosition = _this$getProps.captionPosition,
      disableAnimations = _this$getProps.disableAnimations;
    var disabled = this.getProps().disabled || loading;
    var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
    var containerClassNames = cx(this.getContainerSizeClassName(), (_cx = {}, _cx[styles.container(this.theme)] = true, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
    var labelClassNames = cx(this.getRootSizeClassName(), (_cx2 = {}, _cx2[styles.root(this.theme)] = true, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2[styles.disableAnimation()] = disableAnimations, _cx2));
    var caption = null;
    if (children) {
      var _cx3;
      var captionClass = cx(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[styles.caption(this.theme)] = true, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
      caption = /*#__PURE__*/React.createElement("span", {
        className: captionClass
      }, children);
    }
    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
      rootNodeRef: this.setRootNode
    }, this.props), /*#__PURE__*/React.createElement("label", {
      "data-tid": ToggleDataTids.root,
      className: labelClassNames
    }, /*#__PURE__*/React.createElement("div", {
      className: cx(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[styles.button(this.theme)] = true, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
    }, /*#__PURE__*/React.createElement(FocusControlWrapper, {
      onBlurWhenDisabled: this.resetFocus
    }, /*#__PURE__*/React.createElement("input", {
      type: "checkbox",
      checked: checked,
      onChange: this.handleChange,
      className: cx(this.getInputSizeClassName(), styles.input(this.theme)),
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      ref: this.inputRef,
      disabled: disabled,
      id: id,
      name: name,
      role: "switch",
      "aria-label": ariaLabel,
      "aria-describedby": ariaDescribedby
    })), /*#__PURE__*/React.createElement("div", {
      className: containerClassNames
    }), /*#__PURE__*/React.createElement("div", {
      className: cx(this.getHandleSizeClassName(), globalClasses.handle, (_cx5 = {}, _cx5[styles.handle(this.theme)] = true, _cx5[styles.handleDisabled(this.theme)] = disabled, _cx5))
    })), caption));
  };
  _proto.isUncontrolled = function isUncontrolled() {
    return this.props.checked === undefined;
  };
  return Toggle;
}(React.Component), _Toggle.__KONTUR_REACT_UI__ = 'Toggle', _Toggle.displayName = 'Toggle', _Toggle.defaultProps = {
  disabled: false,
  loading: false,
  captionPosition: 'right',
  disableAnimations: isTestEnv
}, _Toggle)) || _class) || _class;