import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import { connect } from "../../../redux";
import styled from "styled-components";
import { i18n } from '@fishx/i18n';
import { set } from "dot-prop-immutable";
import { getActiveElement } from "../../../selectors";
import { getDeepPropByKeys } from "../../../utils";
import { Row, Col, Radio, message } from '@whalecloud/fdx';
import StaticOptionSettings from "./StaticOptionSettings";
import RemoteOptionSettings from "./RemoteOptionSettings";
var FormContainer = /*#__PURE__*/styled('div', {
  target: "elqjibi0",
  label: "FormContainer"
})({
  padding: '0 5px'
});

var OptionSettings = function OptionSettings(props) {
  var updateElement = props.updateElement,
      element = props.element,
      remote = props.remote,
      _props$sourceKey = props.sourceKey,
      sourceKey = _props$sourceKey === void 0 ? 'data.formItemSettings' : _props$sourceKey,
      _props$targetKey = props.targetKey,
      targetKey = _props$targetKey === void 0 ? 'options' : _props$targetKey;
  var isDependency = sourceKey.indexOf('dependency') > -1;
  var targetSetting = getDeepPropByKeys(sourceKey.split('.'), element) || {};
  var remoteMode = targetSetting.remoteMode; // let { data: { formItemSettings: { remoteMode } = {} } = {} } = element;

  if (isDependency) {
    var _element$data$formSet = element.data.formSettings;
    _element$data$formSet = _element$data$formSet === void 0 ? {} : _element$data$formSet;
    var _element$data$formSet2 = _element$data$formSet.dependency;
    _element$data$formSet2 = _element$data$formSet2 === void 0 ? {} : _element$data$formSet2;
    var _element$data$formSet3 = _element$data$formSet2.source,
        source = _element$data$formSet3 === void 0 ? {} : _element$data$formSet3;
    var key = sourceKey.substring(sourceKey.lastIndexOf('.') + 1);
    var _source$ = source["".concat(key, "_metadata")];
    _source$ = _source$ === void 0 ? {} : _source$;
    var rm = _source$.remoteMode;
    remoteMode = rm;
  }

  var mode = remoteMode ? 'remote' : 'static';

  var _useState = useState(mode),
      _useState2 = _slicedToArray(_useState, 2),
      dataMode = _useState2[0],
      setDataMode = _useState2[1];

  var handleChange = function handleChange(e) {
    var key = isDependency ? "".concat(sourceKey, "_metadata.remoteMode") : "".concat(sourceKey, ".remoteMode");
    var newElement = set(element, key, e.target.value);
    updateElement({
      element: newElement
    });
    e.target.value === 'static' && message.success(i18n('PAGEBUIDER_MSG_OPTIONS_STATIC_SUCCESS'));
    setDataMode(e.target.value);
  };

  return /*#__PURE__*/React.createElement(FormContainer, null, remote && /*#__PURE__*/React.createElement(Row, {
    span: 24
  }, /*#__PURE__*/React.createElement(Col, {
    span: 24,
    align: "center"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    buttonStyle: "solid",
    size: "small",
    value: dataMode,
    onChange: handleChange
  }, /*#__PURE__*/React.createElement(Radio.Button, {
    value: "static"
  }, i18n('PAGEBUIDER_SETTINGS_DATASOURCE_STATIC')), /*#__PURE__*/React.createElement(Radio.Button, {
    value: "remote"
  }, i18n('PAGEBUIDER_SETTINGS_DATASOURCE_REMOTE'))))), dataMode === 'static' && /*#__PURE__*/React.createElement(StaticOptionSettings, {
    sourceKey: sourceKey,
    targetKey: targetKey
  }), dataMode === 'remote' && /*#__PURE__*/React.createElement(RemoteOptionSettings, {
    sourceKey: sourceKey,
    targetKey: targetKey
  }));
};

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)(OptionSettings);
//# sourceMappingURL=OptionSettings.js.map