import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useState } from "react";
import { StorageDataBType, StorageLocalType } from "../type";
import { t } from "../../../../src/locale";
import BoxSlotComponent from "../../_components/boxSlotComponent";
import { getSaveDataBehaviorTypeList, getSaveLocalTypeList } from "../config";
import { getInitStateKey } from "../config/utils";
import { DataSourceType, getDefaultTypeRelationList, getRelationList } from "../../../_utils/formKeyType";
import RenderByFormKey from "../../_components/renderByFormKey";
import { handleRenderByFormKeyData } from "../../../_utils/utils";
export var StorageDataComponent = function StorageDataComponent(props) {
  var _saveData$localConfig;
  var value = props.value,
    onChange = props.onChange;
  var _useState = useState(value || {
      type: StorageDataBType.Local,
      localConfig: {
        type: StorageLocalType.LocalStorage,
        key: getInitStateKey(DataSourceType.defaultType, ''),
        value: getInitStateKey(DataSourceType.defaultType, '')
      }
    }),
    saveData = _useState[0],
    setSaveData = _useState[1];
  var _useState2 = useState([]),
    comKeyOptions = _useState2[0],
    setKeyComOptions = _useState2[1];
  var _useState3 = useState([]),
    comOptions = _useState3[0],
    setComOptions = _useState3[1];
  useEffect(function () {
    setComOptions(getRelationList());
    setKeyComOptions(getDefaultTypeRelationList());
  }, []);
  useEffect(function () {
    onChange(saveData);
  }, [saveData]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.saveDataTitle")
  }, /*#__PURE__*/React.createElement(_Select, {
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    showSearch: true,
    value: saveData.type,
    dataSource: getSaveDataBehaviorTypeList(),
    onChange: function onChange(e) {
      setSaveData(_extends({}, saveData, {
        type: e
      }));
    }
  })), saveData.type === StorageDataBType.Local && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.saveLocalTitle")
  }, /*#__PURE__*/React.createElement(_Select, {
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    showSearch: true,
    value: ((_saveData$localConfig = saveData.localConfig) === null || _saveData$localConfig === void 0 ? void 0 : _saveData$localConfig.type) || StorageLocalType.LocalStorage,
    dataSource: getSaveLocalTypeList(),
    onChange: function onChange(e) {
      setSaveData(_extends({}, saveData, {
        localConfig: _extends({}, saveData.localConfig, {
          type: e
        })
      }));
    }
  })), saveData.type === StorageDataBType.OnLine && /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.saveOnLineTitle")
  }, /*#__PURE__*/React.createElement("div", null, "developing")), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.saveLocalKey")
  }, /*#__PURE__*/React.createElement(RenderByFormKey, {
    relationOption: comKeyOptions,
    value: saveData.localConfig.key,
    onChange: function onChange(v) {
      handleRenderByFormKeyData(v, function (newItem) {
        var newData = _extends({}, saveData.localConfig.key, newItem);
        setSaveData(_extends({}, saveData, {
          localConfig: _extends({}, saveData.localConfig, {
            key: newData
          })
        }));
      });
    }
  })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.saveLocalValue")
  }, /*#__PURE__*/React.createElement(RenderByFormKey, {
    relationOption: comOptions,
    value: saveData.localConfig.value,
    onChange: function onChange(v) {
      handleRenderByFormKeyData(v, function (newItem) {
        var newData = _extends({}, saveData.localConfig.value, newItem);
        setSaveData(_extends({}, saveData, {
          localConfig: _extends({}, saveData.localConfig, {
            value: newData
          })
        }));
      });
    }
  })));
};