import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular';
import { XIcon16Regular } from '@skbkontur/icons/icons/XIcon/XIcon16Regular';
import EventEmitter from 'eventemitter3';
import { isColor } from "../../../lib/styles/ColorHelpers";
import { Input } from "../../../components/Input";
import { Gapped } from "../../../components/Gapped";
import { Link } from "../../../components/Link";
import { Hint } from "../../../components/Hint";
import { isFunction } from "../../../lib/utils";
import { cx } from "../../../lib/theming/Emotion";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { styles } from "../Playground.styles";
var emitter = new EventEmitter();
export var VariableValue = /*#__PURE__*/function (_React$Component) {
  function VariableValue() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.getProps = createPropsGetter(VariableValue.defaultProps);
    _this.state = {
      value: _this.props.value,
      editing: false
    };
    _this.subscription = null;
    _this.rootElement = null;
    _this.debounceTimeout = 500;
    _this.debounceInterval = undefined;
    _this.renderBaseVariableLink = function () {
      var baseVariables = _this.props.baseVariables;
      return /*#__PURE__*/(
        React.createElement("div", {
          className: styles.baseVariableRoot()
        }, _this.colorIcon(), /*#__PURE__*/
        React.createElement("div", {
          className: styles.baseLinkWrapper()
        }, /*#__PURE__*/
        React.createElement(Gapped, null, /*#__PURE__*/
        React.createElement("div", {
          style: {
            textAlign: 'right'
          }
        }, /*#__PURE__*/
        React.createElement(Gapped, {
          vertical: true
        }, baseVariables.map(function (v) {
          return /*#__PURE__*/(
            React.createElement(BaseVariableLink, {
              key: v,
              baseVariable: v,
              emitClickEvent: _this.emitClickEvent
            })
          );
        }))), /*#__PURE__*/
        React.createElement(Hint, {
          text: 'Изменить значение'
        }, /*#__PURE__*/
        React.createElement(Link, {
          icon: /*#__PURE__*/React.createElement(ToolPencilLineIcon16Regular, null),
          onClick: _this.handleEditLinkClick
        })))))
      );
    };
    _this.renderInputWrapper = function () {
      return _this.state.editing ? /*#__PURE__*/
      React.createElement(Gapped, null, _this.renderInput(), _this.renderRollbackIcon()) : _this.renderInput();
    };
    _this.rootRef = function (instance) {
      _this.rootElement = instance;
    };
    _this.colorIcon = function () {
      return /*#__PURE__*/React.createElement("div", {
        className: styles.colorIcon(),
        style: {
          background: _this.state.value
        }
      });
    };
    _this.handleEditLinkClick = function () {
      _this.setState({
        editing: true
      });
    };
    _this.rollbackToBaseVariable = function () {
      _this.setState({
        editing: false,
        value: _this.props.value
      });
    };
    _this.emitClickEvent = function (variable) {
      emitter.emit('clicked', variable);
    };
    _this.handleChange = function (value) {
      _this.setState({
        value: value
      });
      if (_this.debounceInterval === undefined) {
        _this.debounceInterval = window.setInterval(_this.debounceHandler, _this.debounceTimeout);
      }
    };
    _this.debounceHandler = function () {
      var _this$props = _this.props,
        variable = _this$props.variable,
        onChange = _this$props.onChange;
      onChange(variable, _this.state.value);
      clearInterval(_this.debounceInterval);
      _this.debounceInterval = undefined;
    };
    _this.handleBlur = function () {
      _this.setState({
        editing: false
      });
    };
    _this.emitterEventHandler = function (name) {
      if (name === _this.props.variable && _this.rootElement) {
        _this.rootElement.focus();
      }
    };
    return _this;
  }
  _inheritsLoose(VariableValue, _React$Component);
  var _proto = VariableValue.prototype;
  _proto.render = function render() {
    var _cx;
    var _this$props2 = this.props,
      variable = _this$props2.variable,
      theme = _this$props2.theme,
      baseVariables = _this$props2.baseVariables;
    var deprecated = this.getProps().deprecated;
    return /*#__PURE__*/React.createElement("div", {
      className: styles.variable(theme),
      ref: this.rootRef,
      tabIndex: 0
    }, /*#__PURE__*/React.createElement("div", {
      className: cx(styles.variableName(theme), (_cx = {}, _cx[styles.deprecated()] = deprecated, _cx)),
      title: variable
    }, variable + ": "), baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper());
  };
  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;
    if (!this.subscription) {
      emitter.addListener('clicked', this.emitterEventHandler);
      this.subscription = {
        remove: function remove() {
          emitter.removeListener('clicked', _this2.emitterEventHandler);
        }
      };
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.setState({
        value: this.props.value
      });
    }
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.subscription) {
      this.subscription.remove();
    }
    if (this.debounceInterval !== undefined) {
      clearInterval(this.debounceInterval);
    }
  };
  _proto.renderInput = function renderInput() {
    return /*#__PURE__*/React.createElement(Input, {
      leftIcon: isColorExtended(this.state.value) && this.colorIcon(),
      value: this.state.value,
      onValueChange: this.handleChange,
      onBlur: this.handleBlur,
      align: 'right',
      width: this.state.editing ? 225 : 250,
      error: this.props.isError
    });
  };
  _proto.renderRollbackIcon = function renderRollbackIcon() {
    return /*#__PURE__*/React.createElement(Hint, {
      text: 'Вернуться к базовой переменной'
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.linkRoot()
    }, /*#__PURE__*/React.createElement(Link, {
      icon: /*#__PURE__*/React.createElement(XIcon16Regular, null),
      onClick: this.rollbackToBaseVariable
    })));
  };
  return VariableValue;
}(React.Component);
VariableValue.defaultProps = {
  deprecated: false
};
var BaseVariableLink = /*#__PURE__*/function (_React$Component2) {
  function BaseVariableLink() {
    var _this3;
    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }
    _this3 = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this;
    _this3.emitClickEvent = function () {
      _this3.props.emitClickEvent(_this3.props.baseVariable);
    };
    return _this3;
  }
  _inheritsLoose(BaseVariableLink, _React$Component2);
  var _proto2 = BaseVariableLink.prototype;
  _proto2.render = function render() {
    return /*#__PURE__*/React.createElement(Link, {
      onClick: this.emitClickEvent
    }, this.props.baseVariable);
  };
  return BaseVariableLink;
}(React.Component);
var getColorValue = function getColorValue(color) {
  if (isFunction(color)) {
    return color();
  }
  return color;
};
function isColorExtended(color) {
  var colorValue = getColorValue(color);
  var style = new Option().style;
  style.color = colorValue;
  if (colorValue) {
    return isColor(colorValue) || style.color === colorValue;
  }
  return false;
}