import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { connect } from "../../../redux";
import { Collapse, SimpleForm as Form, InputNumber } from '@whalecloud/fdx';
import { set } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { toolFormAttr, toolCollapseAttr } from "../../../utils";
import { getActiveElement } from "../../../selectors";
import ColorPicker from "../../elementSettings/components/ColorPicker";
import PMSettings from "../../elementSettings/components/PMSettings";
import styled from "styled-components";
import SelectIcon from '@fishx/select-icon';
var Panel = Collapse.Panel;
var valueKey = 'data.componentSettings';
var FormContainer = /*#__PURE__*/styled('div', {
  target: "eyjb9u50",
  label: "FormContainer"
})({
  padding: 5
});

var IconSettings = function IconSettings(_ref) {
  var element = _ref.element,
      updateElement = _ref.updateElement;
  var _element$data = element.data;
  _element$data = _element$data === void 0 ? {} : _element$data;
  var _element$data$compone = _element$data.componentSettings,
      componentSettings = _element$data$compone === void 0 ? {} : _element$data$compone;
  var width = componentSettings.width,
      defaultIcon = componentSettings.icon,
      color = componentSettings.color;
  var initialValues = {
    width: width
  };

  var _useState = useState(defaultIcon),
      _useState2 = _slicedToArray(_useState, 2),
      icon = _useState2[0],
      setIcon = _useState2[1];

  var onFormChange = function onFormChange(obj) {
    Object.keys(obj).forEach(function (key) {
      var propName = "".concat(valueKey, ".").concat(key);
      var value;

      if (key === 'trigger') {
        value = [obj[key]];
      } else {
        value = obj[key];
      }

      var newElement = set(element, propName, value);
      updateElement({
        element: newElement
      });
    });
  };

  var setData = useMemo(function () {
    var historyUpdated = {};
    return function (name, value) {
      var history = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
      var attrKey = "".concat(valueKey, ".").concat(name);
      var newElement = set(element, attrKey, value);

      if (!history) {
        updateElement({
          element: newElement,
          history: history
        });
        return;
      }

      if (historyUpdated[name] !== value) {
        historyUpdated[name] = value;
        updateElement({
          element: newElement
        });
      }
    };
  }, [element, updateElement]);
  var updateColor = useCallback(function (value) {
    return setData("color", value);
  }, [setData]);
  var updateColorPreview = useCallback(function (value) {
    return setData("color", value, false);
  }, [setData]);
  useEffect(function () {
    onFormChange({
      icon: icon
    });
  }, [icon]);
  return /*#__PURE__*/React.createElement(FormContainer, null, /*#__PURE__*/React.createElement(Collapse, Object.assign({}, toolCollapseAttr, {
    defaultActiveKey: ['1', '2', '3']
  }), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS'),
    key: "1"
  }, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    initialValues: initialValues,
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_ICON'),
    name: "icon"
  }, /*#__PURE__*/React.createElement(SelectIcon, {
    icon: icon,
    iconClick: setIcon,
    placeholder: i18n('PAGEBUIDER_PLS_SELECT'),
    titleText: i18n('PAGEBUIDER_PLS_SELECT_ICON'),
    typeText: [i18n('PAGEBUIDER_ICON_TYPE_NORMAL'), i18n('PAGEBUIDER_ICON_TYPE_OUTLINED'), i18n('PAGEBUIDER_ICON_TYPE_FILLED'), i18n('PAGEBUIDER_ICON_TYPE_TWO_TONE')],
    sortText: [i18n('PAGEBUIDER_ICON_SORT_DIRECTION_ICON'), i18n('PAGEBUIDER_ICON_SORT_TIPS_ICON'), i18n('PAGEBUIDER_ICON_SORT_EDIT_ICON'), i18n('PAGEBUIDER_ICON_SORT_NORMAL_ICON')]
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_ICON_FONT_SIZE'),
    name: "width"
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 10
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_COLOR')
  }, /*#__PURE__*/React.createElement(ColorPicker, {
    value: color,
    updateValue: updateColor,
    updatePreview: updateColorPreview
  })))), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS_MARGIN'),
    key: "2"
  }, /*#__PURE__*/React.createElement(PMSettings, {
    styleAttribute: "margin"
  })), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS_PADDING'),
    key: "3"
  }, /*#__PURE__*/React.createElement(PMSettings, {
    styleAttribute: "padding"
  }))));
};

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

export default connect(function (state) {
  return {
    element: getActiveElement(state)
  };
}, mapDispatchToProps)(IconSettings);
//# sourceMappingURL=IconSettings.js.map