import _get from "lodash/get";
import React, { useCallback } from "react";
import { set } from "dot-prop-immutable";
import { useHandlers } from "../../../../hooks/useHandlers";
import { connect } from "../../../redux";
import { Select, SimpleForm as Form, Radio } from "@whalecloud/fdx";
import { i18n } from '@fishx/i18n';
import { getActiveElementWithChildren } from "../../../selectors";
import ColorPicker from "../components/ColorPicker";
import ImagePicker from "../components/ImagePicker";
import { toolFormAttr } from "../../../utils";
var Option = Select.Option;
var scaleOpts = [{
  label: i18n('PAGEBUIDER_SETTINGS_COVER'),
  value: 'cover'
}, {
  label: i18n('PAGEBUIDER_SETTINGS_CONTAIN'),
  value: 'contain'
}, {
  label: i18n('PAGEBUIDER_SETTINGS_ORIGIN_SIZE'),
  value: 'originalSize'
}, {
  label: i18n('PAGEBUIDER_SETTINGS_TITLE'),
  value: 'title'
}, {
  label: i18n('PAGEBUIDER_SETTINGS_TITLE_HORIZONTAL'),
  value: 'tileHorizontally'
}, {
  label: i18n('PAGEBUIDER_SETTINGS_TITLE_VERTICAL'),
  value: 'tileVertically'
}];
var positionOpts = [{
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_TOP_LEFT'),
  value: 'top left'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_TOP'),
  value: 'top'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_TOP_RIGHT'),
  value: 'top right'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_CENTER_LEFT'),
  value: 'center left'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_CENTER'),
  value: 'center'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_CENTER_RIGHT'),
  value: 'center right'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_BOTTOM_LEFT'),
  value: 'bottom left'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_BOTTOM_CENTER'),
  value: 'bottom center'
}, {
  label: i18n('PAGEBUIDER_ELEMENT_PLACE_BOTTOM_RIGHT'),
  value: 'bottom right'
}];
var root = "data.settings.background";

var Settings = function Settings(props) {
  var _useHandlers = useHandlers(props, {
    setImage: function setImage(_ref) {
      var element = _ref.element,
          updateElement = _ref.updateElement;
      return function (image) {
        if (!image) {
          updateElement({
            element: set(element, "".concat(root, ".image.file"), null),
            history: true
          });
        } else {
          updateElement({
            element: set(element, "".concat(root, ".image.file"), image),
            history: true
          });
        }
      };
    },
    setScaling: function setScaling(_ref2) {
      var element = _ref2.element,
          updateElement = _ref2.updateElement;
      return function (value) {
        updateElement({
          element: set(element, "".concat(root, ".image.scaling"), value),
          history: true
        });
      };
    },
    setPosition: function setPosition(_ref3) {
      var element = _ref3.element,
          updateElement = _ref3.updateElement;
      return function (position) {
        updateElement({
          element: set(element, "".concat(root, ".image.position"), position),
          history: true
        });
      };
    },
    setColor: function setColor(_ref4) {
      var element = _ref4.element,
          updateElement = _ref4.updateElement;
      return function (value, history) {
        updateElement({
          element: set(element, "".concat(root, ".color"), value),
          history: history
        });
      };
    }
  }),
      setImage = _useHandlers.setImage,
      setScaling = _useHandlers.setScaling,
      setPosition = _useHandlers.setPosition,
      setColor = _useHandlers.setColor;

  var onColorChange = useCallback(function (value) {
    return setColor(value, false);
  }, [setColor]);
  var onColorChangeComplete = useCallback(function (value) {
    return setColor(value);
  }, [setColor]);
  var element = props.element;

  var bg = _get(element, "data.settings.background");

  var imageSrc = _get(bg, "image.file.src");

  var onFormChange = function onFormChange(obj) {};

  var initialValues = {
    "image.scaling": _get(bg, "image.scaling") || scaleOpts[0].value,
    "image.position": _get(bg, "image.position")
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPicker, {
    label: i18n('PAGEBUIDER_SETTINGS_COLOR'),
    valueKey: root + ".color",
    defaultValue: "#fff",
    updateValue: onColorChange,
    updatePreview: onColorChangeComplete
  }), /*#__PURE__*/React.createElement(ImagePicker, {
    label: i18n('PAGEBUIDER_SETTINGS_BACKGROUND')
  }), /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    initialValues: initialValues,
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_SCALING'),
    name: "image.scaling"
  }, /*#__PURE__*/React.createElement(Select, {
    disabled: !imageSrc
  }, scaleOpts.map(function (item) {
    return /*#__PURE__*/React.createElement(Option, {
      key: "imageScale_".concat(item.value),
      value: item.value
    }, item.label);
  }))), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_POSITION'),
    name: "image.position"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    size: "small",
    disabled: !imageSrc
  }, positionOpts.map(function (item) {
    return /*#__PURE__*/React.createElement(Radio.Button, {
      key: "imagePosition_".concat(item.value.split(' ').join('-')),
      value: item.value
    }, item.label);
  })))));
};

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

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