import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useMemo, useState } from 'react';
import BoxSlotComponent from "../../_components/boxSlotComponent";
import { t } from "../../../../src/locale";
import { SchemaService } from "../../../_utils/schemaService";
import { OperationType, AnimationSpeed, AttentionSeekers, ANIMATION_TYPE } from "../type";
export var AnimationComponent = function AnimationComponent(props) {
  var type = props.type,
    value = props.value,
    onChange = props.onChange;
  var _useState = useState([]),
    animationDataSource = _useState[0],
    setAnimationDataSourceDataSource = _useState[1];
  var _useState2 = useState(value !== null && value !== void 0 && value.length ? value : [{
      componentKey: '',
      animationType: AttentionSeekers.bounce,
      repeatTimes: 1,
      speed: AnimationSpeed.fast
    }]),
    settingList = _useState2[0],
    setSettingList = _useState2[1];
  useEffect(function () {
    var schemaService = new SchemaService();
    var gList = schemaService.getAnimationListData();
    setAnimationDataSourceDataSource(gList);
  }, []);
  useEffect(function () {
    onChange(settingList);
  }, [settingList]);

  //动画的类型
  var animationTypeList = useMemo(function () {
    var animationGroupList = [];
    for (var category in ANIMATION_TYPE) {
      var animationList = 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 = useMemo(function () {
    return [{
      label: 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 = useMemo(function () {
    return [{
      label: t('setter.animationSpeed.faster'),
      value: AnimationSpeed.faster
    }, {
      label: t('setter.animationSpeed.fast'),
      value: AnimationSpeed.fast
    }, {
      label: t('setter.animationSpeed.slow'),
      value: AnimationSpeed.slow
    }, {
      label: t('setter.animationSpeed.slower'),
      value: AnimationSpeed.slower
    }];
  }, []);
  var handleAddData = function handleAddData() {
    setSettingList(function (data) {
      return [].concat(data, [{
        componentKey: '',
        animationType: AttentionSeekers.bounce,
        repeatTimes: 1,
        speed: 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 = _extends({}, item, (_extends2 = {}, _extends2[key] = value, _extends2));
        }
        return item;
      });
    });
  };
  return /*#__PURE__*/React.createElement("div", null, settingList.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        marginBottom: '10px',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        border: '1px solid #ccc',
        padding: '10px',
        borderRadius: '10px',
        flex: 1
      }
    }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
      title: t('setter.AnimationComponent')
    }, /*#__PURE__*/React.createElement(_Select, {
      placeholder: t('setter.selectPlaceHolder'),
      notFoundContent: t('setter.notFoundContent'),
      showSearch: true,
      value: item.componentKey,
      dataSource: animationDataSource,
      onChange: function onChange(v) {
        handleChange(index, 'componentKey', v);
      }
    })), type === OperationType.start && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BoxSlotComponent, {
      title: t('setter.animationType')
    }, /*#__PURE__*/React.createElement(_Select, {
      placeholder: t('setter.selectPlaceHolder'),
      notFoundContent: t('setter.notFoundContent'),
      showSearch: true,
      value: item.animationType,
      dataSource: animationTypeList,
      onChange: function onChange(v) {
        handleChange(index, 'animationType', v);
      }
    })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
      title: t('setter.animationRepeatTimes')
    }, /*#__PURE__*/React.createElement(_Select, {
      placeholder: t('setter.selectPlaceHolder'),
      notFoundContent: t('setter.notFoundContent'),
      showSearch: true,
      value: item.repeatTimes,
      dataSource: repeatTimesList,
      onChange: function onChange(v) {
        handleChange(index, 'repeatTimes', v);
      }
    })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
      title: t('setter.animationSpeed.name')
    }, /*#__PURE__*/React.createElement(_Select, {
      placeholder: t('setter.selectPlaceHolder'),
      notFoundContent: t('setter.notFoundContent'),
      showSearch: true,
      value: item.speed,
      dataSource: speedList,
      onChange: function onChange(v) {
        handleChange(index, 'speed', v);
      }
    })))), /*#__PURE__*/React.createElement(_Button, {
      text: true,
      onClick: function onClick() {
        return handleDeleteData(index);
      }
    }, ' ', /*#__PURE__*/React.createElement(_Icon, {
      type: "ashbin"
    })));
  }), /*#__PURE__*/React.createElement(_Button, {
    type: "primary",
    text: true,
    onClick: handleAddData
  }, t('setter.addData')));
};