"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.VariableValue = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
var _ToolPencilLineIcon16Regular = require("@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular");
var _XIcon16Regular = require("@skbkontur/icons/icons/XIcon/XIcon16Regular");
var _eventemitter = _interopRequireDefault(require("eventemitter3"));

var _ColorHelpers = require("../../lib/styles/ColorHelpers");
var _Input = require("../../components/Input");
var _Gapped = require("../../components/Gapped");

var _Link = require("../../components/Link");
var _Hint = require("../../components/Hint");
var _utils = require("../../lib/utils");
var _Emotion = require("../../lib/theming/Emotion");
var _createPropsGetter = require("../../lib/createPropsGetter");

var _Playground = require("./Playground.styles");

var emitter = new _eventemitter.default();var


















VariableValue = exports.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 = (0, _createPropsGetter.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.default.createElement("div", { className: _Playground.styles.baseVariableRoot() },
        _this.colorIcon(), /*#__PURE__*/
        _react.default.createElement("div", { className: _Playground.styles.baseLinkWrapper() }, /*#__PURE__*/
        _react.default.createElement(_Gapped.Gapped, null, /*#__PURE__*/
        _react.default.createElement("div", { style: { textAlign: 'right' } }, /*#__PURE__*/
        _react.default.createElement(_Gapped.Gapped, { vertical: true },
        baseVariables.map(function (v) {return /*#__PURE__*/(
            _react.default.createElement(BaseVariableLink, { key: v, baseVariable: v, emitClickEvent: _this.emitClickEvent }));}
        )
        )
        ), /*#__PURE__*/
        _react.default.createElement(_Hint.Hint, { text: 'Изменить значение' }, /*#__PURE__*/
        _react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_ToolPencilLineIcon16Regular.ToolPencilLineIcon16Regular, null), onClick: _this.handleEditLinkClick })
        )
        )
        )
        ));

    };_this.

    renderInputWrapper = function () {
      return _this.state.editing ? /*#__PURE__*/
      _react.default.createElement(_Gapped.Gapped, null,
      _this.renderInput(),
      _this.renderRollbackIcon()
      ) :

      _this.renderInput();

    };_this.

























    rootRef = function (instance) {
      _this.rootElement = instance;
    };_this.

    colorIcon = function () {
      return /*#__PURE__*/_react.default.createElement("div", { className: _Playground.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;}(0, _inheritsLoose2.default)(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.default.createElement("div", { className: _Playground.styles.variable(theme), ref: this.rootRef, tabIndex: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Playground.styles.variableName(theme), (_cx = {}, _cx[_Playground.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.default.createElement(_Input.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.default.createElement(_Hint.Hint, { text: 'Вернуться к базовой переменной' }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.linkRoot() }, /*#__PURE__*/_react.default.createElement(_Link.Link, { icon: /*#__PURE__*/_react.default.createElement(_XIcon16Regular.XIcon16Regular, null), onClick: this.rollbackToBaseVariable })));};return VariableValue;}(_react.default.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;}(0, _inheritsLoose2.default)(BaseVariableLink, _React$Component2);var _proto2 = BaseVariableLink.prototype;_proto2.render = function render() {return /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: this.emitClickEvent }, this.props.baseVariable);};return BaseVariableLink;}(_react.default.Component);




var getColorValue = function getColorValue(color) {
  if ((0, _utils.isFunction)(color)) {
    return color();
  }

  return color;
};

function isColorExtended(color) {
  var colorValue = getColorValue(color);

  var style = new Option().style;
  style.color = colorValue;

  if (colorValue) {
    return (0, _ColorHelpers.isColor)(colorValue) || style.color === colorValue;
  }

  return false;
}