import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { connect } from "../../../redux";
import { IconButton } from '@webiny/ui/Button';
import { ReactComponent as ThemeIcon } from "@svgr/webpack!../../../assets/icons/theme-icon.svg";
import { Dropdown, Menu } from '@whalecloud/fdx';
import { loadTheme } from "../../../utils";

var PageThemeButton = function PageThemeButton(_ref) {
  var allThemes = _ref.allThemes,
      currentTheme = _ref.currentTheme,
      saveCurrentTheme = _ref.saveCurrentTheme;

  // 切换皮肤
  var MenuList = function MenuList(_ref2) {
    var _ref2$data = _ref2.data,
        data = _ref2$data === void 0 ? {} : _ref2$data;
    var defaultClass = 'ant-dropdown-menu-item';

    var _useState = useState(currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.name),
        _useState2 = _slicedToArray(_useState, 2),
        selected = _useState2[0],
        setSelected = _useState2[1];

    var handleSelectTheme = function handleSelectTheme(obj) {
      setSelected(obj === null || obj === void 0 ? void 0 : obj.name);
      saveCurrentTheme(obj);
      loadTheme(obj === null || obj === void 0 ? void 0 : obj.name, obj === null || obj === void 0 ? void 0 : obj.url);
    };

    return /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(data).map(function (v) {
      var _data$v, _data$v2;

      return /*#__PURE__*/React.createElement(Menu.Item, {
        className: selected === data[v].name ? "formbuild-dropdown-active ".concat(defaultClass) : defaultClass,
        key: (_data$v = data[v]) === null || _data$v === void 0 ? void 0 : _data$v.name,
        onClick: function onClick() {
          return handleSelectTheme(data[v]);
        }
      }, (_data$v2 = data[v]) === null || _data$v2 === void 0 ? void 0 : _data$v2.title);
    }));
  };

  var menu = function menu(allThemes) {
    return /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuList, {
      data: allThemes
    }), /*#__PURE__*/React.createElement(Menu.Item, null, /*#__PURE__*/React.createElement("a", {
      target: "_blank",
      rel: "noopener noreferrer",
      href: "https://fish.iwhalecloud.com/wcap/_book/Form-theme.html"
    }, "\u81EA\u5B9A\u4E49\u4E3B\u9898")));
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
    overlay: function overlay() {
      return menu(allThemes);
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "formbuild-btn-opt"
  }, /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(ThemeIcon, null)
  }), /*#__PURE__*/React.createElement("span", null, "\u4E3B\u9898\u5207\u6362"))));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    saveCurrentTheme: function saveCurrentTheme(payload) {
      dispatch({
        type: 'style/saveCurrentTheme',
        payload: payload
      });
    }
  };
};

export default connect(function (state) {
  var _state$style, _state$style2;

  return {
    allThemes: state === null || state === void 0 ? void 0 : (_state$style = state.style) === null || _state$style === void 0 ? void 0 : _state$style.allThemes,
    currentTheme: state === null || state === void 0 ? void 0 : (_state$style2 = state.style) === null || _state$style2 === void 0 ? void 0 : _state$style2.currentTheme
  };
}, mapDispatchToProps)(PageThemeButton);
//# sourceMappingURL=PageThemeButton.js.map