import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _NumberPicker from "@alifd/next/es/number-picker";
import _Input from "@alifd/next/es/input";
import _Icon from "@alifd/next/es/icon";
import _Button from "@alifd/next/es/button";
import _Dialog from "@alifd/next/es/dialog";
import _extends from "@babel/runtime/helpers/extends";
import _Select from "@alifd/next/es/select";
import _Grid from "@alifd/next/es/grid";
import _Radio from "@alifd/next/es/radio";
import React, { Component, useEffect, useState } from "react";
import "./index.less";
import BoxSlotComponent from "../_components/boxSlotComponent";
import { uuid } from "../../_utils/utils";
import { t } from "../../../src/locale";
import { groupModeType } from "./type";
import { VideoMade } from "../../_utils/formKeyType";
import { cloneDeep } from "lodash";
var RadioGroup = _Radio.Group;
var Row = _Grid.Row,
  Col = _Grid.Col;
var Option = _Select.Option;
function createNewGroupItem() {
  return {
    groupId: "g_" + uuid(),
    groupName: "",
    beginTime: 0,
    endTime: 1,
    loop: true,
    loopNum: 0,
    playNow: true
  };
}
var CVideoStepsSetter = function CVideoStepsSetter(props) {
  var value = props.value,
    onChange = props.onChange,
    field = props.field;
  var dc;
  var _useState = useState(value || []),
    groupList = _useState[0],
    setGroupList = _useState[1];
  var _useState2 = useState(),
    groupItem = _useState2[0],
    setGroupItem = _useState2[1];
  var _useState3 = useState({
      visible: false,
      type: 'add',
      title: t('page.add')
    }),
    dialogConfig = _useState3[0],
    setDialogConfig = _useState3[1];
  useEffect(function () {
    setGroupList(value);
  }, [value]);
  var openAddDialog = function openAddDialog() {
    setDialogConfig({
      visible: true,
      type: 'add',
      title: t('page.add')
    });
    var newGroup = createNewGroupItem();
    setGroupItem(newGroup);
  };
  var removeGroup = function removeGroup(groupId) {
    var _dc;
    var newGroup = groupList.filter(function (item) {
      return item.groupId !== groupId;
    });
    setGroupList(newGroup);
    onChange(newGroup);
    (_dc = dc) === null || _dc === void 0 ? void 0 : _dc.hide();
  };
  var saveGroupData = function saveGroupData() {
    var newGroupList = groupList || [];
    var nG = [].concat(Object.values(newGroupList));
    if (groupItem) {
      if (dialogConfig.type === 'add') {
        nG.push(groupItem);
      } else {
        nG = nG.map(function (item) {
          if (item.groupId === groupItem.groupId) {
            return groupItem;
          }
          return item;
        });
      }
      setGroupList(nG);
      onChange(nG);
    }
    closeDialog();
  };
  var closeDialog = function closeDialog() {
    setDialogConfig(_extends({}, dialogConfig, {
      visible: false
    }));
  };
  var onGroupItemChange = function onGroupItemChange(v) {
    setGroupItem(v);
  };
  var alterGroupItem = function alterGroupItem(item) {
    setDialogConfig({
      visible: true,
      type: 'alter',
      title: t('page.alter')
    });
    setGroupItem(cloneDeep(item));
  };
  function removeConfirm(groupId) {
    dc = _Dialog.confirm({
      v2: true,
      title: t("page.removeTip"),
      content: t("page.removeTipTitle"),
      footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
        onClick: function onClick() {
          removeGroup(groupId);
        },
        type: "primary"
      }, t('setter.ok')), /*#__PURE__*/React.createElement(_Button, {
        style: {
          marginLeft: '10px'
        },
        onClick: function onClick() {
          var _dc2;
          (_dc2 = dc) === null || _dc2 === void 0 ? void 0 : _dc2.hide();
        }
      }, t('setter.cancel')))
    });
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "cGroupManager"
  }, /*#__PURE__*/React.createElement("div", {
    className: "group-header"
  }, /*#__PURE__*/React.createElement(_Button, {
    type: "primary",
    onClick: openAddDialog
  }, t("page.add"))), groupList && groupList.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "group-body"
  }, groupList && groupList.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      className: "group-body-item",
      style: {
        cursor: 'pointer'
      },
      onClick: function onClick() {
        alterGroupItem(item);
      }
    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
      span: "24"
    }, /*#__PURE__*/React.createElement("div", {
      className: "group-btn"
    }, /*#__PURE__*/React.createElement(_Icon, {
      style: {
        cursor: 'pointer'
      },
      type: "edit",
      onClick: function onClick() {
        alterGroupItem(item);
      }
    }), /*#__PURE__*/React.createElement(_Icon, {
      style: {
        cursor: 'pointer',
        marginLeft: "10px"
      },
      type: "ashbin",
      onClick: function onClick(e) {
        e.stopPropagation();
        removeConfirm(item.groupId);
      }
    })))), /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "4"
    }, t("page.groupId"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "20"
    }, " ", item.groupId)), /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "12"
    }, t("tool-video.groupName"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "12"
    }, item.groupName)), /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "14"
    }, " ", field.node.propsData.display === VideoMade.Video ? t("tool-video.key_YlYhgW2begin") : t("tool-video.key_YlYhgW2opens"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "10"
    }, item.beginTime)), /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "14"
    }, field.node.propsData.display === VideoMade.Video ? t("tool-video.key_YlYhgW2xUend") : t("tool-video.key_YlYhgW2overs"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "10"
    }, item.endTime)), /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "8"
    }, t("tool-video.key_YlYhgW2xUCst"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "16"
    }, String(item.loop))), item.loop ? /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "12"
    }, t("tool-video.key_YlYhgW2xUCen"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "12"
    }, item.loopNum)) : '', /*#__PURE__*/React.createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/React.createElement(Col, {
      span: "14"
    }, t("tool-video.key_YlYhgW2xpure"), ":"), /*#__PURE__*/React.createElement(Col, {
      span: "10"
    }, item.playNow === true ? t('tool-video.key_YlYhgW2xpurd') : t('tool-video.key_YlYhgW2xcurd'))));
  })), /*#__PURE__*/React.createElement(_Dialog, {
    className: "CComputed-dialog",
    visible: dialogConfig.visible,
    title: dialogConfig.title,
    footerAlign: "right",
    onClose: closeDialog,
    footer: [/*#__PURE__*/React.createElement(_Button, {
      onClick: saveGroupData,
      type: "primary"
    }, t('setter.ok')), /*#__PURE__*/React.createElement(_Button, {
      style: {
        marginLeft: '10px'
      },
      onClick: closeDialog
    }, t('setter.cancel'))]
  }, /*#__PURE__*/React.createElement(GroupItemComponent, {
    display: field.node.propsData.display,
    imgArrList: field.node.propsData.imgArrList,
    groupItem: groupItem,
    onChange: onGroupItemChange
  })));
};
var GroupItemComponent = function GroupItemComponent(props) {
  var groupItem = props.groupItem,
    onChange = props.onChange,
    display = props.display,
    imgArrList = props.imgArrList;
  var _useState4 = useState(groupItem || createNewGroupItem()),
    group = _useState4[0],
    setGroup = _useState4[1];
  useEffect(function () {
    onChange(group);
  }, [group]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("page.groupId") + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(_Input, {
    style: {
      width: "100%"
    },
    value: group.groupId,
    disabled: true
  })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("tool-video.groupName") + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(_Input, {
    style: {
      width: "100%"
    },
    value: group.groupName,
    onChange: function onChange(e) {
      setGroup(_extends({}, group, {
        groupName: e
      }));
    }
  })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t('tool-video.key_YlYhgW2xpure') + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(_Select, {
    defaultValue: group.playNow,
    value: group.playNow,
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    onChange: function onChange(e) {
      setGroup(_extends({}, group, {
        playNow: e
      }));
    }
  }, /*#__PURE__*/React.createElement(Option, {
    value: true
  }, t('tool-video.key_YlYhgW2xpurd')), /*#__PURE__*/React.createElement(Option, {
    value: false
  }, t('tool-video.key_YlYhgW2xcurd')))), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: (display === VideoMade.Video ? t("tool-video.key_YlYhgW2begin") : t("tool-video.key_YlYhgW2opens")) + ": ",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(_NumberPicker, {
    min: 0,
    value: group.beginTime,
    precision: 3,
    onChange: function onChange(e) {
      setGroup(_extends({}, group, {
        beginTime: e,
        endTime: e + 1
      }));
    }
  })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: (display === VideoMade.Video ? t("tool-video.key_YlYhgW2xUend") : t("tool-video.key_YlYhgW2overs")) + ": ",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(_NumberPicker, {
    min: group.beginTime + 1,
    max: display === VideoMade.VideoFrames ? imgArrList.length : '-',
    precision: 3,
    value: group.endTime,
    onChange: function onChange(e) {
      setGroup(_extends({}, group, {
        endTime: e
      }));
    }
  })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t('tool-video.key_YlYhgW2xUCst') + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement(RadioGroup, {
    value: group.loop,
    onChange: function onChange(e) {
      setGroup(_extends({}, group, {
        loop: e
      }));
    }
  }, /*#__PURE__*/React.createElement(_Radio, {
    id: groupModeType.single,
    value: true
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: '#fff'
    }
  }, t('tool-video.key_YlYhgW2xUyes'))), /*#__PURE__*/React.createElement(_Radio, {
    id: groupModeType.schedule,
    value: false
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color: '#fff'
    }
  }, t('tool-video.key_YlYhgW2xUCno'))))), group.loop ? /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("tool-video.key_YlYhgW2xUCen") + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_NumberPicker, {
    value: group.loopNum,
    onChange: function onChange(e) {
      setGroup(_extends({}, group, {
        loopNum: e
      }));
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      color: "#ffffff",
      marginLeft: "5px"
    }
  }, "(", t('tool-video.key_YlYhgW2xUple'), ")"))) : '');
};
var _default = /*#__PURE__*/function (_Component) {
  function _default() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(_default, _Component);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(CVideoStepsSetter, this.props);
  };
  return _default;
}(Component);
export { _default as default };