"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ThemeShowcase = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));

var _ColorHelpers = require("../../lib/styles/ColorHelpers");
var _LightTheme = require("../../lib/theming/themes/LightTheme");
var _DarkTheme = require("../../lib/theming/themes/DarkTheme");

var _ComboBox = require("../../components/ComboBox");
var _Gapped = require("../../components/Gapped");
var _Link = require("../../components/Link");
var _Sticky = require("../../components/Sticky");
var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
var _Tooltip = require("../../components/Tooltip");
var _Supports = require("../../lib/Supports");

var _Emotion = require("../../lib/theming/Emotion");
var _ThemeContext = require("../../lib/theming/ThemeContext");


var _VariablesCollector = require("./VariablesCollector");






var _ThemeShowcase2 = require("./ThemeShowcase.styles");

var EMPTY_ARRAY = [];

var ALL_VARIABLES = Object.keys(_LightTheme.LIGHT_THEME);var








ThemeShowcase = exports.ThemeShowcase = /*#__PURE__*/function (_React$Component) {





  function ThemeShowcase(props) {var _this;
    _this = _React$Component.call(this, props) || this;_this.state = {};_this.isUnmounting = false;_this.variablesDiff = [];_this.






















































































    getItems = function (query) {
      return Promise.resolve(_this.getValues(query));
    };_this.
    handleVariableChange = function (item) {
      if (!_this.isUnmounting) {
        _this.setState({ selectedVariable: item });
      }
    };_this.
    handleUnexpectedVariableInput = function (query) {
      var values = _this.getValues(query);
      if (values.length > 0) {
        return values[0];
      }

      return _this.resetVariable();
    };_this.
    resetVariable = function () {
      if (!_this.isUnmounting) {
        _this.setState({ selectedVariable: undefined });
      }
    };if (props.isDebugMode) {ALL_VARIABLES.forEach(function (variable) {var found = _VariablesCollector.ALL_USED_VARIABLES.includes(variable);if (!found) {_this.variablesDiff.push(variable);}});}return _this;}(0, _inheritsLoose2.default)(ThemeShowcase, _React$Component);var _proto = ThemeShowcase.prototype;_proto.render = function render() {var _this2 = this;if (!_Supports.IS_PROXY_SUPPORTED) {return /*#__PURE__*/_react.default.createElement("div", null, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0432", ' ', /*#__PURE__*/_react.default.createElement(_Link.Link, { href: 'https://caniuse.com/#feat=proxy', target: '_blank' }, "\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u043E\u0439 Proxy"), ".");}var selectedVariable = this.state.selectedVariable;var descriptionsToRender = selectedVariable ? _VariablesCollector.COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : _VariablesCollector.COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + _VariablesCollector.CALLS_COUNT + " \u0432\u044B\u0437\u043E\u0432\u043E\u0432)" : '';var executionTime = isDebugMode ? "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0437\u0430 " + _VariablesCollector.EXECUTION_TIME.toFixed(3) + "ms" : '';return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: 'top' }, /*#__PURE__*/_react.default.createElement("div", { className: _ThemeShowcase2.styles.searchBar(theme), "data-perf-info": executionTime + " " + callsCount }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 15 }, /*#__PURE__*/_react.default.createElement(_ComboBox.ComboBox, { getItems: _this2.getItems, value: selectedVariable, onValueChange: _this2.handleVariableChange, onUnexpectedInput: _this2.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: _this2.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return /*#__PURE__*/_react.default.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this2.handleVariableChange });})), /*#__PURE__*/_react.default.createElement(ShowUnusedVariables, { diff: _this2.variablesDiff }));});};_proto.componentWillUnmount = function componentWillUnmount() {this.isUnmounting = true;};_proto.getValues = function getValues(query) {var lowerCaseQuery = query && query.toLowerCase().trim();var allItems = _VariablesCollector.ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = _VariablesCollector.ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(_react.default.Component);var








ComponentShowcase = /*#__PURE__*/function (_React$Component2) {function ComponentShowcase() {return _React$Component2.apply(this, arguments) || this;}(0, _inheritsLoose2.default)(ComponentShowcase, _React$Component2);var _proto2 = ComponentShowcase.prototype;_proto2.
  render = function render() {var _this3 = this;
    var _this$props = this.props,name = _this$props.name,description = _this$props.description,onVariableSelect = _this$props.onVariableSelect,isDebugMode = _this$props.isDebugMode;
    var elements = Object.keys(description);

    return elements.length ? /*#__PURE__*/
    _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
    function (theme) {
      return /*#__PURE__*/(
        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
        _react.default.createElement(_Sticky.Sticky, { side: 'top', offset: 40 },
        function (isSticky) {var _cx;return /*#__PURE__*/(
            _react.default.createElement("h2", {
              className: (0, _Emotion.cx)((_cx = {}, _cx[
              _ThemeShowcase2.styles.heading(theme)] = true, _cx[
              _ThemeShowcase2.styles.headingSticky()] = isSticky, _cx)
              ) },

            _this3.props.name
            ));}

        ), /*#__PURE__*/
        _react.default.createElement("table", { className: _ThemeShowcase2.styles.table() }, /*#__PURE__*/
        _react.default.createElement("thead", null, /*#__PURE__*/
        _react.default.createElement("tr", null, /*#__PURE__*/
        _react.default.createElement("th", { className: _ThemeShowcase2.styles.headerCell(), style: { width: 170 } }, "ClassName"

        ), /*#__PURE__*/
        _react.default.createElement("th", { className: _ThemeShowcase2.styles.headerCell(), style: { width: 210 } }, "Variable Name"

        ), /*#__PURE__*/
        _react.default.createElement("th", { className: _ThemeShowcase2.styles.headerCell(), style: { width: 250 } }, "Default Value"

        ), /*#__PURE__*/
        _react.default.createElement("th", { className: _ThemeShowcase2.styles.headerCell(), style: { width: 250 } }, "Dark Value"

        )
        )
        ), /*#__PURE__*/
        _react.default.createElement("tbody", null,
        elements.map(function (el) {return /*#__PURE__*/(
            _react.default.createElement(ComponentShowcaseRow, {
              key: name + "_" + el,
              element: el,
              row: description[el],
              onVariableSelect: onVariableSelect,
              isDebugMode: isDebugMode }
            ));}
        )
        )
        )
        ));

    }
    ) :
    null;
  };return ComponentShowcase;}(_react.default.Component);var









ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {function ComponentShowcaseRow() {return _React$Component3.apply(this, arguments) || this;}(0, _inheritsLoose2.default)(ComponentShowcaseRow, _React$Component3);var _proto3 = ComponentShowcaseRow.prototype;_proto3.
  render = function render() {var _this4 = this;
    var _this$props2 = this.props,el = _this$props2.element,row = _this$props2.row,isDebugMode = _this$props2.isDebugMode;
    var rowSpan = row.variables.length + 1;

    return /*#__PURE__*/(
      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
      function (theme) {var _cx2;
        return /*#__PURE__*/(
          _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
          _react.default.createElement("tr", { className: (0, _Emotion.cx)(_ThemeShowcase2.styles.invisibleRow(), (_cx2 = {}, _cx2[_ThemeShowcase2.styles.invisibleDarkRow()] = theme === _DarkTheme.DARK_THEME, _cx2)) }, /*#__PURE__*/
          _react.default.createElement("td", { className: (0, _Emotion.cx)(_ThemeShowcase2.styles.cell(), _ThemeShowcase2.styles.majorCell()), rowSpan: rowSpan }, /*#__PURE__*/
          _react.default.createElement("span", { className: _ThemeShowcase2.styles.elementName() }, ".", el)
          ), /*#__PURE__*/
          _react.default.createElement("td", { className: _ThemeShowcase2.styles.invisibleCell() }), /*#__PURE__*/
          _react.default.createElement("td", { className: _ThemeShowcase2.styles.invisibleCell() }), /*#__PURE__*/
          _react.default.createElement("td", { className: _ThemeShowcase2.styles.invisibleCell() })
          ),
          row.variables.map(function (varName) {var _cx3;
            var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
            var variableDefault = _LightTheme.LIGHT_THEME[varName];
            var variableDark = _DarkTheme.DARK_THEME[varName];
            var hasNoVariables = isDebugMode && !variableDefault;
            return /*#__PURE__*/(
              _react.default.createElement("tr", {
                key: el + "_" + varName,
                className: (0, _Emotion.cx)(_ThemeShowcase2.styles.row(), (_cx3 = {}, _cx3[
                _ThemeShowcase2.styles.suspiciousRow()] = hasNoVariables, _cx3[
                _ThemeShowcase2.styles.darkRow()] = theme === _DarkTheme.DARK_THEME, _cx3)
                ) }, /*#__PURE__*/

              _react.default.createElement("td", { className: _ThemeShowcase2.styles.cell() }, /*#__PURE__*/
              _react.default.createElement(VariableName, {
                variableName: varName,
                dependencies: dependencies,
                onVariableSelect: _this4.props.onVariableSelect }
              )
              ), /*#__PURE__*/
              _react.default.createElement("td", { className: _ThemeShowcase2.styles.cell() }, /*#__PURE__*/
              _react.default.createElement(VariableValue, { value: variableDefault })
              ), /*#__PURE__*/
              _react.default.createElement("td", { className: _ThemeShowcase2.styles.cell() }, /*#__PURE__*/
              _react.default.createElement(VariableValue, { value: variableDark })
              )
              ));

          })
          ));

      }
      ));

  };return ComponentShowcaseRow;}(_react.default.Component);var








VariableName = /*#__PURE__*/function (_React$Component4) {function VariableName() {var _this5;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;_this5.





























    handleVariableSelect = function () {
      var _this5$props = _this5.props,variableName = _this5$props.variableName,onVariableSelect = _this5$props.onVariableSelect;
      if (onVariableSelect) {
        onVariableSelect({ value: variableName, label: variableName });
      }
    };return _this5;}(0, _inheritsLoose2.default)(VariableName, _React$Component4);var _proto4 = VariableName.prototype;_proto4.render = function render() {return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase2.styles.variableName(), onClick: this.handleVariableSelect }, this.props.variableName), this.props.dependencies.length > 0 && this.renderDependencies());};_proto4.renderDependencies = function renderDependencies() {var _this$props3 = this.props,dependencies = _this$props3.dependencies,onVariableSelect = _this$props3.onVariableSelect;return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {return /*#__PURE__*/_react.default.createElement(DependencyName, { key: "dependency_" + dependency, dependencyName: dependency, onDependencySelect: onVariableSelect });}));};return VariableName;}(_react.default.Component);var






DependencyName = /*#__PURE__*/function (_React$Component5) {function DependencyName() {var _this6;for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}_this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;_this6.














    getValues = function () {
      var dependencyName = _this6.props.dependencyName;
      var dependencyDefault = _LightTheme.LIGHT_THEME[dependencyName];
      var dependencyDark = _DarkTheme.DARK_THEME[dependencyName];
      return /*#__PURE__*/(
        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
        _react.default.createElement("span", null, "Default value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDefault })), /*#__PURE__*/
        _react.default.createElement("span", null, "Dark value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDark }))
        ));

    };_this6.

    handleDependencySelect = function () {
      var _this6$props = _this6.props,dependencyName = _this6$props.dependencyName,onDependencySelect = _this6$props.onDependencySelect;
      if (onDependencySelect) {
        onDependencySelect({ value: dependencyName, label: dependencyName });
      }
    };return _this6;}(0, _inheritsLoose2.default)(DependencyName, _React$Component5);var _proto5 = DependencyName.prototype;_proto5.render = function render() {return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), "\u2013", ' ', /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, { trigger: 'hover', render: this.getValues, pos: 'right middle' }, /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase2.styles.variableName(), onClick: this.handleDependencySelect }, this.props.dependencyName)));};return DependencyName;}(_react.default.Component);


var VariableValue = function VariableValue(props) {var _cx4;
  var value = props.value;
  var valueIsColor = (0, _ColorHelpers.isColor)(value);
  var valueIsGradient = isGradient(value);
  var hasExample = valueIsColor || valueIsGradient;
  var borderColor = 'transparent';
  if (hasExample) {
    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
  }

  return /*#__PURE__*/(
    _react.default.createElement("span", { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_ThemeShowcase2.styles.undefined()] = !value, _cx4)) },
    hasExample && /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase2.styles.colorExample(), style: { background: value, borderColor: borderColor } }),
    value || 'undefined'
    ));

};

var ShowUnusedVariables = function ShowUnusedVariables(props) {
  if (props.diff.length === 0) {
    return null;
  }

  return /*#__PURE__*/(
    _react.default.createElement("div", { className: _ThemeShowcase2.styles.unusedVariablesWarning() }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (",
    props.diff.length, "):", /*#__PURE__*/

    _react.default.createElement("ul", null,
    props.diff.sort().map(function (v) {return /*#__PURE__*/(
        _react.default.createElement("li", { key: v }, v));}
    )
    )
    ));

};

function isGradient(input) {
  return !!input && input.startsWith('linear-gradient');
}