import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/esm/createForOfIteratorHelperLoose";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
import { Gapped } from "../../../components/Gapped";
import { Loader } from "../../../components/Loader";
import { isNonNullable } from "../../../lib/utils";
import { VariableValue } from "../VariableValue";
import { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from "../constants";
import { styles } from "../Playground.styles";
export var ThemeEditor = /*#__PURE__*/function (_React$Component) {
  function ThemeEditor() {
    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.state = {
      groups: [],
      isLoading: true
    };
    _this.renderGroups = function () {
      var _this$props = _this.props,
        editingTheme = _this$props.editingTheme,
        currentTheme = _this$props.currentTheme,
        currentErrors = _this$props.currentErrors,
        onValueChange = _this$props.onValueChange;
      var keys = ThemeFactory.getKeys(editingTheme).filter(function (key) {
        return !isDeprecatedVariable(key);
      });
      return /*#__PURE__*/(
        React.createElement(Gapped, {
          vertical: true
        }, _this.state.groups.map(function (i) {
          return /*#__PURE__*/(
            React.createElement(Group, {
              editingTheme: editingTheme,
              currentTheme: currentTheme,
              currentErrors: currentErrors,
              onValueChange: onValueChange,
              title: i.title,
              variables: keys.filter(i.isCommon ? isCommonVariable.bind(null, _this.state.groups.reduce(prefixesReducer, [])) : isGroupVariable.bind(null, i.prefix)),
              key: i.title
            })
          );
        }), DEPRECATED_VARIABLES.length > 0 ? /*#__PURE__*/
        React.createElement(Group, {
          editingTheme: editingTheme,
          currentTheme: currentTheme,
          currentErrors: currentErrors,
          onValueChange: onValueChange,
          title: 'Deprecated Variables',
          variables: DEPRECATED_VARIABLES
        }) : null)
      );
    };
    return _this;
  }
  _inheritsLoose(ThemeEditor, _React$Component);
  var _proto = ThemeEditor.prototype;
  _proto.render = function render() {
    return this.state.isLoading ? /*#__PURE__*/React.createElement("div", {
      className: styles.loaderWrapper()
    }, /*#__PURE__*/React.createElement(Loader, {
      type: "big",
      active: true,
      className: styles.loader()
    })) : this.renderGroups();
  };
  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;
    this.updateTimeout = window.setTimeout(function () {
      _this2.setState({
        groups: VARIABLES_GROUPS,
        isLoading: false
      });
    }, 500);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    clearTimeout(this.updateTimeout);
  };
  return ThemeEditor;
}(React.Component);
var Group = function Group(props) {
  var editingTheme = props.editingTheme,
    currentTheme = props.currentTheme,
    currentErrors = props.currentErrors,
    onValueChange = props.onValueChange,
    title = props.title,
    variables = props.variables;
  return variables.length > 0 ? /*#__PURE__*/
  React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement("h2", {
    className: styles.editorGroupHeader(currentTheme)
  }, title), variables.map(function (variable) {
    var value = editingTheme[variable];
    var isError = currentErrors[variable];
    return /*#__PURE__*/(
      React.createElement(VariableValue, {
        theme: currentTheme,
        onChange: onValueChange,
        value: value,
        isError: isError || false,
        variable: variable,
        key: variable,
        baseVariables: getBaseVariables(editingTheme, variable),
        deprecated: isDeprecatedVariable(variable)
      })
    );
  })) : null;
};
var isDeprecatedVariable = function isDeprecatedVariable(name) {
  return DEPRECATED_VARIABLES.includes(name);
};
var isGroupVariable = function isGroupVariable(prefix, name) {
  var splitPrefix = prefix.split(' ') || [];
  for (var _iterator = _createForOfIteratorHelperLoose(splitPrefix), _step; !(_step = _iterator()).done;) {
    var item = _step.value;
    if (name.startsWith(item.trim())) {
      return true;
    }
  }
  return false;
};
var isCommonVariable = function isCommonVariable(prefixes, name) {
  for (var _iterator2 = _createForOfIteratorHelperLoose(prefixes), _step2; !(_step2 = _iterator2()).done;) {
    var item = _step2.value;
    if (name.startsWith(item.trim())) {
      return false;
    }
  }
  return true;
};
var prefixesReducer = function prefixesReducer(acc, current) {
  var splitPrefix = current.prefix.split(' ');
  return [].concat(acc, splitPrefix);
};
var getBaseVariables = function getBaseVariables(theme, variable) {
  // TODO: Rewrite for loop.
  // TODO: Enable `no-param-reassign` rule.
  // eslint-disable-next-line no-param-reassign
  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {
    if (Object.prototype.hasOwnProperty.call(theme, variable)) {
      var descriptor = Object.getOwnPropertyDescriptor(theme, variable);
      if (descriptor && typeof descriptor.get !== 'undefined') {
        var getterBody = descriptor.get.toString();
        var variableNameMatchArray = getterBody.match(/this\.(\w+)\b/gm) || [];
        return (variableNameMatchArray || []).map(function (v) {
          return v.replace(/this\./g, '');
        });
      }
      break;
    }
  }
  return [];
};