"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.AnimationComponent = void 0;
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _boxSlotComponent = _interopRequireDefault(require("../../_components/boxSlotComponent"));
var _locale = require("../../../../src/locale");
var _schemaService = require("../../../_utils/schemaService");
var _type = require("../type");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var AnimationComponent = exports.AnimationComponent = function AnimationComponent(props) {
  var type = props.type,
    value = props.value,
    onChange = props.onChange;
  var _useState = (0, _react.useState)([]),
    animationDataSource = _useState[0],
    setAnimationDataSourceDataSource = _useState[1];
  var _useState2 = (0, _react.useState)(value !== null && value !== void 0 && value.length ? value : [{
      componentKey: '',
      animationType: _type.AttentionSeekers.bounce,
      repeatTimes: 1,
      speed: _type.AnimationSpeed.fast
    }]),
    settingList = _useState2[0],
    setSettingList = _useState2[1];
  (0, _react.useEffect)(function () {
    var schemaService = new _schemaService.SchemaService();
    var gList = schemaService.getAnimationListData();
    setAnimationDataSourceDataSource(gList);
  }, []);
  (0, _react.useEffect)(function () {
    onChange(settingList);
  }, [settingList]);

  //动画的类型
  var animationTypeList = (0, _react.useMemo)(function () {
    var animationGroupList = [];
    for (var category in _type.ANIMATION_TYPE) {
      var animationList = _type.ANIMATION_TYPE[category];
      var groupList = Object.values(animationList).map(function (value) {
        return {
          label: value,
          value: value
        };
      });
      animationGroupList.push({
        label: category,
        children: groupList
      });
    }
    return animationGroupList;
  }, []);
  var repeatTimesList = (0, _react.useMemo)(function () {
    return [{
      label: (0, _locale.t)('setter.infinite'),
      value: -1
    }, {
      label: '1',
      value: 1
    }, {
      label: '2',
      value: 2
    }, {
      label: '3',
      value: 3
    }, {
      label: '4',
      value: 4
    }, {
      label: '5',
      value: 5
    }, {
      label: '6',
      value: 6
    }, {
      label: '7',
      value: 7
    }, {
      label: '8',
      value: 8
    }, {
      label: '9',
      value: 9
    }, {
      label: '10',
      value: 10
    }];
  }, []);
  var speedList = (0, _react.useMemo)(function () {
    return [{
      label: (0, _locale.t)('setter.animationSpeed.faster'),
      value: _type.AnimationSpeed.faster
    }, {
      label: (0, _locale.t)('setter.animationSpeed.fast'),
      value: _type.AnimationSpeed.fast
    }, {
      label: (0, _locale.t)('setter.animationSpeed.slow'),
      value: _type.AnimationSpeed.slow
    }, {
      label: (0, _locale.t)('setter.animationSpeed.slower'),
      value: _type.AnimationSpeed.slower
    }];
  }, []);
  var handleAddData = function handleAddData() {
    setSettingList(function (data) {
      return [].concat(data, [{
        componentKey: '',
        animationType: _type.AttentionSeekers.bounce,
        repeatTimes: 1,
        speed: _type.AnimationSpeed.fast
      }]);
    });
  };
  var handleDeleteData = function handleDeleteData(index) {
    setSettingList(function (data) {
      return data.filter(function (item, idx) {
        return idx !== index;
      });
    });
  };

  // 更改配置
  var handleChange = function handleChange(index, key, value) {
    setSettingList(function (data) {
      return data.map(function (item, idx) {
        if (index === idx) {
          var _extends2;
          item = (0, _extends3["default"])({}, item, (_extends2 = {}, _extends2[key] = value, _extends2));
        }
        return item;
      });
    });
  };
  return /*#__PURE__*/_react["default"].createElement("div", null, settingList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        display: 'flex',
        marginBottom: '10px',
        alignItems: 'center'
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        border: '1px solid #ccc',
        padding: '10px',
        borderRadius: '10px',
        flex: 1
      }
    }, /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)('setter.AnimationComponent')
    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
      placeholder: (0, _locale.t)('setter.selectPlaceHolder'),
      notFoundContent: (0, _locale.t)('setter.notFoundContent'),
      showSearch: true,
      value: item.componentKey,
      dataSource: animationDataSource,
      onChange: function onChange(v) {
        handleChange(index, 'componentKey', v);
      }
    })), type === _type.OperationType.start && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)('setter.animationType')
    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
      placeholder: (0, _locale.t)('setter.selectPlaceHolder'),
      notFoundContent: (0, _locale.t)('setter.notFoundContent'),
      showSearch: true,
      value: item.animationType,
      dataSource: animationTypeList,
      onChange: function onChange(v) {
        handleChange(index, 'animationType', v);
      }
    })), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)('setter.animationRepeatTimes')
    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
      placeholder: (0, _locale.t)('setter.selectPlaceHolder'),
      notFoundContent: (0, _locale.t)('setter.notFoundContent'),
      showSearch: true,
      value: item.repeatTimes,
      dataSource: repeatTimesList,
      onChange: function onChange(v) {
        handleChange(index, 'repeatTimes', v);
      }
    })), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
      title: (0, _locale.t)('setter.animationSpeed.name')
    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
      placeholder: (0, _locale.t)('setter.selectPlaceHolder'),
      notFoundContent: (0, _locale.t)('setter.notFoundContent'),
      showSearch: true,
      value: item.speed,
      dataSource: speedList,
      onChange: function onChange(v) {
        handleChange(index, 'speed', v);
      }
    })))), /*#__PURE__*/_react["default"].createElement(_button["default"], {
      text: true,
      onClick: function onClick() {
        return handleDeleteData(index);
      }
    }, ' ', /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "ashbin"
    })));
  }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
    type: "primary",
    text: true,
    onClick: handleAddData
  }, (0, _locale.t)('setter.addData')));
};