import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import { connect } from "../../../redux";
import { set, get } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { getActiveElement, getElementWithChildren } from "../../../selectors";
import { toolFormAttr, enableClass } from "../../../utils";
import { SimpleForm as Form, AutoComplete, Input, Icon } from '@whalecloud/fdx';
import ModalStyleSheet from "../../elementSettings/style/components/ModalStyleSheet";
var itemKey = 'data.className';

var CommonStyleSettings = function CommonStyleSettings(props) {
  var element = props.element,
      updateElement = props.updateElement,
      previewDevice = props.previewDevice,
      contentElement = props.contentElement,
      onChange = props.onChange;
  var getClassName = get(element, itemKey);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      modalStyleSheetVisible = _useState2[0],
      setModalStyleSheetVisible = _useState2[1];

  var handleStyleSheetEditor = function handleStyleSheetEditor() {
    setModalStyleSheetVisible(true);
  };

  var data = [{
    title: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
      className: "pagebuilder-title-tag"
    }, "CSS"), /*#__PURE__*/React.createElement("span", {
      onClick: handleStyleSheetEditor,
      className: "text-black cursor-pointer underline hover:text-indigo-600"
    }, i18n('PAGEBUIDER_SETTINGS_THEME_EDITOR'), " ...")),
    children: [{
      title: ''
    }]
  }];
  Object.keys(enableClass).map(function (v) {
    var _enableClass$v;

    var childs = (_enableClass$v = enableClass[v]) === null || _enableClass$v === void 0 ? void 0 : _enableClass$v.map(function (vl) {
      return {
        title: vl
      };
    });
    data.push({
      title: /*#__PURE__*/React.createElement("span", {
        className: "font-black"
      }, v),
      children: _toConsumableArray(childs)
    });
  });

  var _useState3 = useState(data),
      _useState4 = _slicedToArray(_useState3, 2),
      classDataSource = _useState4[0],
      setClassDataSource = _useState4[1];

  var initialValues = {
    className: getClassName ? getClassName.split(' ').filter(function (v) {
      return !v.includes('_css_');
    }).join(' ') : ''
  };
  var Option = AutoComplete.Option;
  var OptGroup = AutoComplete.OptGroup;

  var renderTitle = function renderTitle(title) {
    return /*#__PURE__*/React.createElement("span", null, title);
  };

  var options = classDataSource === null || classDataSource === void 0 ? void 0 : classDataSource.map(function (group) {
    var _group$children;

    return /*#__PURE__*/React.createElement(OptGroup, {
      key: group.title,
      label: renderTitle(group.title)
    }, group === null || group === void 0 ? void 0 : (_group$children = group.children) === null || _group$children === void 0 ? void 0 : _group$children.map(function (opt) {
      return /*#__PURE__*/React.createElement(Option, {
        key: opt.title,
        value: opt.title
      }, opt.title);
    }));
  });

  var onFormChange = function onFormChange(obj) {
    Object.keys(obj).forEach(function (key) {
      if (key === 'className') {
        var _getClass$split;

        var getClass = get(element, itemKey);
        var tempClass = getClass === null || getClass === void 0 ? void 0 : (_getClass$split = getClass.split(' ')) === null || _getClass$split === void 0 ? void 0 : _getClass$split.filter(function (v) {
          return v.includes('_css_');
        })[0];
        var newElement = set(element, itemKey, tempClass ? "".concat(tempClass, " ").concat(obj[key]) : obj[key]);
        updateElement({
          element: newElement
        });
      }
    });
  };

  var onSearch = function onSearch(value) {
    var newData = [];
    data.forEach(function (v) {
      newData.push({
        title: v.title,
        children: v.children.filter(function (ele) {
          return ele.title.includes(value);
        })
      });
    });
    setClassDataSource(newData);
  }; // useEffect(() => {
  //   // 保存device到document
  //   // todo 拿到外面
  //   if (previewDevice) {
  //     const newElement = set(contentElement, 'data.className', matchCodePrefix[previewDevice]);
  //     updateElement({
  //       element: newElement,
  //     })
  //   }
  // }, [previewDevice]);


  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    initialValues: initialValues,
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_THEME_CLASS'),
    name: "className"
  }, /*#__PURE__*/React.createElement(AutoComplete, {
    className: "certain-category-search",
    dropdownClassName: "certain-category-search-dropdown",
    dropdownMatchSelectWidth: false,
    dropdownStyle: {
      width: 200
    },
    style: {
      width: '100%'
    },
    dataSource: options,
    optionLabelProp: "value",
    onSearch: onSearch
  }, /*#__PURE__*/React.createElement(Input, {
    suffix: /*#__PURE__*/React.createElement(Icon, {
      type: "down",
      className: "certain-category-icon"
    })
  })))), /*#__PURE__*/React.createElement(ModalStyleSheet, {
    visible: modalStyleSheetVisible,
    handleModalVisible: setModalStyleSheetVisible
  }));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    }
  };
};

export default connect(function (state) {
  var ele = getActiveElement(state);
  var element = getElementWithChildren(state, ele.id);
  return {
    element: element // formElement: getParentFormWidthChildren(state, ele.id),
    // previewDevice: state.ui.previewDevice,
    // contentElement: getContent(state),

  };
}, mapDispatchToProps)(CommonStyleSettings);
//# sourceMappingURL=CommonStyleSettings.js.map