import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from "react";
import { connect } from "../../../redux";
import { set, get } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { getActiveElement } from "../../../selectors";
import { Row, Col, Radio, message } from '@whalecloud/fdx';
import CommonCodeDrawer from "../components/CommonCodeDrawer";
import RemoteOptionSettings from "../components/RemoteOptionSettings";
var exampleOptions = [{
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men'
    }]
  }]
}];

var OptionSettings = function OptionSettings(props) {
  var updateElement = props.updateElement,
      element = props.element,
      _props$sourceKey = props.sourceKey,
      sourceKey = _props$sourceKey === void 0 ? 'data.formItemSettings' : _props$sourceKey;
  var _element$data = element.data;
  _element$data = _element$data === void 0 ? {} : _element$data;
  var _element$data$formIte = _element$data.formItemSettings,
      formItemSettings = _element$data$formIte === void 0 ? {} : _element$data$formIte;
  var _formItemSettings$sta = formItemSettings.staticOptions,
      staticOptions = _formItemSettings$sta === void 0 ? exampleOptions : _formItemSettings$sta;
  var remoteMode = formItemSettings.remoteMode;
  var isDependency = sourceKey.indexOf('dependency') > -1;
  var mode = formItemSettings.remoteMode ? 'remote' : 'static';

  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 _source$$staticOption = _source$.staticOptions,
        so = _source$$staticOption === void 0 ? [] : _source$$staticOption,
        rm = _source$.remoteMode;
    staticOptions = so;
    formItemSettings.remoteMode = rm;
  }

  var valueKey = sourceKey;
  var valueKeyMetaData = !isDependency ? sourceKey : "".concat(sourceKey, "_metadata");

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

  var handleChange = function handleChange(e) {
    var newElement = set(element, "data.formItemSettings.remoteMode", e.target.value);
    updateElement({
      element: newElement
    });
    e.target.value === 'static' && message.success(i18n('PAGEBUIDER_MSG_OPTIONS_STATIC_SUCCESS'));
    setDataMode(e.target.value);
  };

  useEffect(function () {
    var code = get(element, 'data.formItemSettings.options');
    onCreate(code);
  }, [remoteMode]);

  var onCreate = function onCreate(code) {
    var newElement = set(element, isDependency ? valueKey : "".concat(valueKey, ".options"), code);
    newElement = set(newElement, "".concat(valueKeyMetaData, ".staticOptions"), code);

    if (formItemSettings.remoteMode) {
      isDependency && (newElement = set(newElement, "".concat(valueKeyMetaData, ".remoteMode"), false));
    }

    updateElement({
      element: newElement
    });
  };

  var CodeDrawerProps = {
    value: JSON.stringify(staticOptions, null, '\t'),
    onClose: onCreate,
    title: "".concat(i18n('PAGEBUIDER_TITLE_STATIC'), "(JSON)"),
    buttonText: i18n('PAGEBUIDER_TITLE_STATIC')
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
    span: 24,
    className: "mb-4"
  }, /*#__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("div", {
    style: {
      textAlign: 'center'
    }
  }, /*#__PURE__*/React.createElement(CommonCodeDrawer, CodeDrawerProps)), dataMode === 'remote' && /*#__PURE__*/React.createElement(RemoteOptionSettings, {
    sourceKey: sourceKey
  }));
};

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=CascaderOptionSettings.js.map