import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React, { useContext } from 'react';
import { DocsContext } from '@storybook/addon-docs';
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
import { SidePage } from "../../../components/SidePage";
import { Gapped } from "../../../components/Gapped";
import { ComboBox } from "../../../components/ComboBox";
import { Link } from "../../../components/Link";
import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
import { findPropertyDescriptor } from "../../../lib/theming/ThemeHelpers";
import { LIGHT_THEME } from "../../../lib/theming/themes/LightTheme";
import { DARK_THEME } from "../../../lib/theming/themes/DarkTheme";
import { ThemeEditor } from "../ThemeEditor";
import { styles } from "../Playground.styles";
import { Playground } from "../Playground";
import { ThemeType } from "../constants";
var getEditingThemeType = function getEditingThemeType(editingThemeItem) {
  if (editingThemeItem) {
    return editingThemeItem.value;
  }
  return 'lightTheme';
};
var ThemeContextPlaygroundInternal = /*#__PURE__*/function (_React$Component) {
  function ThemeContextPlaygroundInternal(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.editableThemesItems = [{
      value: ThemeType.LightTheme,
      label: 'Светлая тема'
    }, {
      value: ThemeType.DarkTheme,
      label: 'Тёмная тема'
    }];
    _this.renderSidePage = function () {
      var _this$state = _this.state,
        currentTheme = _this$state.currentTheme,
        themesErrors = _this$state.themesErrors,
        editingThemeItem = _this$state.editingThemeItem,
        themes = _this$state.themes;
      var editingThemeType = getEditingThemeType(editingThemeItem);
      var themeErrors = themesErrors[editingThemeType];
      return /*#__PURE__*/(
        React.createElement(SidePage, {
          disableAnimations: true,
          ignoreBackgroundClick: true,
          width: 600,
          onClose: _this.handleClose
        }, /*#__PURE__*/
        React.createElement(SidePage.Header, null, /*#__PURE__*/
        React.createElement("div", {
          className: styles.editorHeaderWrapper(currentTheme)
        }, /*#__PURE__*/
        React.createElement(Gapped, {
          wrap: true,
          verticalAlign: "middle"
        }, /*#__PURE__*/
        React.createElement("span", null, "\u0422\u0435\u043C\u0430 \u0434\u043B\u044F \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F:"), /*#__PURE__*/
        React.createElement(ComboBox, {
          getItems: _this.getEditableThemesItems,
          value: editingThemeItem,
          onValueChange: _this.handleEditingThemeSwitch
        }))), /*#__PURE__*/
        React.createElement("div", {
          style: {
            fontSize: 14,
            marginTop: 8
          }
        }, /*#__PURE__*/
        React.createElement(Link, {
          onClick: _this.handleGetTheme
        }, "\u0412\u044B\u0432\u0435\u0441\u0442\u0438 \u0442\u0435\u043C\u0443 \u0432 \u043A\u043E\u043D\u0441\u043E\u043B\u044C"))), /*#__PURE__*/
        React.createElement(SidePage.Body, null, /*#__PURE__*/
        React.createElement("div", {
          className: styles.sidePageBody()
        }, /*#__PURE__*/
        React.createElement(ThemeEditor, {
          editingTheme: themes[editingThemeType],
          currentTheme: currentTheme,
          currentErrors: themeErrors,
          onValueChange: _this.handleThemeVariableChange
        }))))
      );
    };
    _this.handleGetTheme = function () {
      var currentTheme = _this.state.currentTheme;
      var themeObject = {};
      ThemeFactory.getKeys(currentTheme).forEach(function (key) {
        var descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);
        if (descriptor && !descriptor.get && LIGHT_THEME[key] && currentTheme[key] !== LIGHT_THEME[key]) {
          themeObject[key] = currentTheme[key];
        }
      });
      console.log(JSON.stringify(themeObject));
    };
    _this.handleOpen = function () {
      _this.setState(function (state) {
        return {
          editorOpened: true,
          editingThemeItem: _this.editableThemesItems.find(function (i) {
            return i.value === state.currentThemeType;
          })
        };
      });
    };
    _this.handleClose = function () {
      _this.setState({
        editorOpened: false
      });
    };
    _this.handleThemeChange = function (value) {
      var themeType = value;
      _this.setState({
        currentThemeType: themeType,
        currentTheme: _this.state.themes[themeType]
      });
    };
    _this.handleThemeVariableChange = function (variable, value) {
      var _this$state2 = _this.state,
        editingThemeItem = _this$state2.editingThemeItem,
        currentTheme = _this$state2.currentTheme,
        themes = _this$state2.themes,
        themesErrors = _this$state2.themesErrors;
      var editingThemeType = getEditingThemeType(editingThemeItem);
      var theme = themes[editingThemeType];
      var currentValue = theme[variable];
      var canSetVariable = true;
      if (ColorFunctions.isValid(currentValue)) {
        canSetVariable = ColorFunctions.isValid(value);
        themesErrors[editingThemeType][variable] = !canSetVariable;
      }
      var nextThemeErrors = _extends({}, themesErrors);
      nextThemeErrors[editingThemeType][variable] = !canSetVariable;
      var stateUpdate = {
        themes: themes,
        currentTheme: currentTheme,
        themesErrors: nextThemeErrors
      };
      if (canSetVariable) {
        var result = _this.changeThemeVariable(theme, variable, value);
        stateUpdate.themes[editingThemeType] = result;
        if (_this.state.currentThemeType === editingThemeType) {
          stateUpdate.currentTheme = result;
        }
      }
      _this.setState(stateUpdate);
    };
    _this.getEditableThemesItems = function (query) {
      return Promise.resolve(_this.editableThemesItems.filter(function (i) {
        return i.label.toLowerCase().includes(query.toLowerCase());
      }));
    };
    _this.handleEditingThemeSwitch = function (item) {
      _this.setState({
        editingThemeItem: item
      });
    };
    _this.changeThemeVariable = function (theme, variableName, variableValue) {
      var result = {};
      ThemeFactory.getKeys(theme).forEach(function (key) {
        var descriptor = findPropertyDescriptor(theme, key);
        descriptor.enumerable = true;
        descriptor.configurable = true;
        if (key === variableName) {
          delete descriptor.get;
          delete descriptor.set;
          descriptor.value = variableValue;
        }
        Object.defineProperty(result, key, descriptor);
      });
      return ThemeFactory.create(result);
    };
    _this.state = {
      currentTheme: LIGHT_THEME,
      currentThemeType: ThemeType.LightTheme,
      editorOpened: false,
      themes: {
        lightTheme: LIGHT_THEME,
        darkTheme: DARK_THEME
      },
      themesErrors: {
        lightTheme: {},
        darkTheme: {}
      }
    };
    return _this;
  }
  _inheritsLoose(ThemeContextPlaygroundInternal, _React$Component);
  var _proto = ThemeContextPlaygroundInternal.prototype;
  _proto.render = function render() {
    var _this$state3 = this.state,
      currentTheme = _this$state3.currentTheme,
      editorOpened = _this$state3.editorOpened,
      currentThemeType = _this$state3.currentThemeType;
    var _this$props = this.props,
      globalBrand = _this$props.globalBrand,
      globalAccent = _this$props.globalAccent;
    var themeAttribute = currentThemeType === ThemeType.DarkTheme ? 'dark' : 'light';
    return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
      value: currentTheme
    }, /*#__PURE__*/React.createElement("div", {
      "data-k-brand": globalBrand,
      "data-k-accent": globalAccent,
      "data-k-theme": themeAttribute
    }, editorOpened && this.renderSidePage(), /*#__PURE__*/React.createElement(Playground, {
      onThemeChange: this.handleThemeChange,
      currentThemeType: currentThemeType,
      onEditLinkClick: this.handleOpen
    })));
  };
  return ThemeContextPlaygroundInternal;
}(React.Component);
export var ThemeContextPlayground = function ThemeContextPlayground(props) {
  var _context$store$userGl;
  var context = useContext(DocsContext);
  var globals = (context == null || (_context$store$userGl = context.store.userGlobals) == null ? void 0 : _context$store$userGl.globals) || {};
  var brand = globals.brand || 'red';
  var accent = globals.accent || 'gray';
  return /*#__PURE__*/React.createElement(ThemeContextPlaygroundInternal, _extends({}, props, {
    globalBrand: brand,
    globalAccent: accent
  }));
};