"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
var _react = _interopRequireWildcard(require("react"));
require("./index.less");
var _boxSlotComponent = _interopRequireDefault(require("../_components/boxSlotComponent"));
var _utils = require("../../_utils/utils");
var _locale = require("../../../src/locale");
var _type = require("./type");
var _formKeyType = require("../../_utils/formKeyType");
var _lodash = require("lodash");
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 RadioGroup = _radio["default"].Group;
var Row = _grid["default"].Row,
  Col = _grid["default"].Col;
var Option = _select["default"].Option;
function createNewGroupItem() {
  return {
    groupId: "g_" + (0, _utils.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 = (0, _react.useState)(value || []),
    groupList = _useState[0],
    setGroupList = _useState[1];
  var _useState2 = (0, _react.useState)(),
    groupItem = _useState2[0],
    setGroupItem = _useState2[1];
  var _useState3 = (0, _react.useState)({
      visible: false,
      type: 'add',
      title: (0, _locale.t)('page.add')
    }),
    dialogConfig = _useState3[0],
    setDialogConfig = _useState3[1];
  (0, _react.useEffect)(function () {
    setGroupList(value);
  }, [value]);
  var openAddDialog = function openAddDialog() {
    setDialogConfig({
      visible: true,
      type: 'add',
      title: (0, _locale.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((0, _extends2["default"])({}, dialogConfig, {
      visible: false
    }));
  };
  var onGroupItemChange = function onGroupItemChange(v) {
    setGroupItem(v);
  };
  var alterGroupItem = function alterGroupItem(item) {
    setDialogConfig({
      visible: true,
      type: 'alter',
      title: (0, _locale.t)('page.alter')
    });
    setGroupItem((0, _lodash.cloneDeep)(item));
  };
  function removeConfirm(groupId) {
    dc = _dialog["default"].confirm({
      v2: true,
      title: (0, _locale.t)("page.removeTip"),
      content: (0, _locale.t)("page.removeTipTitle"),
      footer: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
        onClick: function onClick() {
          removeGroup(groupId);
        },
        type: "primary"
      }, (0, _locale.t)('setter.ok')), /*#__PURE__*/_react["default"].createElement(_button["default"], {
        style: {
          marginLeft: '10px'
        },
        onClick: function onClick() {
          var _dc2;
          (_dc2 = dc) === null || _dc2 === void 0 ? void 0 : _dc2.hide();
        }
      }, (0, _locale.t)('setter.cancel')))
    });
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "cGroupManager"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "group-header"
  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
    type: "primary",
    onClick: openAddDialog
  }, (0, _locale.t)("page.add"))), groupList && groupList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "group-body"
  }, groupList && groupList.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "group-body-item",
      style: {
        cursor: 'pointer'
      },
      onClick: function onClick() {
        alterGroupItem(item);
      }
    }, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "24"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "group-btn"
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      style: {
        cursor: 'pointer'
      },
      type: "edit",
      onClick: function onClick() {
        alterGroupItem(item);
      }
    }), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      style: {
        cursor: 'pointer',
        marginLeft: "10px"
      },
      type: "ashbin",
      onClick: function onClick(e) {
        e.stopPropagation();
        removeConfirm(item.groupId);
      }
    })))), /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "4"
    }, (0, _locale.t)("page.groupId"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "20"
    }, " ", item.groupId)), /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "12"
    }, (0, _locale.t)("tool-video.groupName"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "12"
    }, item.groupName)), /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "14"
    }, " ", field.node.propsData.display === _formKeyType.VideoMade.Video ? (0, _locale.t)("tool-video.key_YlYhgW2begin") : (0, _locale.t)("tool-video.key_YlYhgW2opens"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "10"
    }, item.beginTime)), /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "14"
    }, field.node.propsData.display === _formKeyType.VideoMade.Video ? (0, _locale.t)("tool-video.key_YlYhgW2xUend") : (0, _locale.t)("tool-video.key_YlYhgW2overs"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "10"
    }, item.endTime)), /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "8"
    }, (0, _locale.t)("tool-video.key_YlYhgW2xUCst"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "16"
    }, String(item.loop))), item.loop ? /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "12"
    }, (0, _locale.t)("tool-video.key_YlYhgW2xUCen"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "12"
    }, item.loopNum)) : '', /*#__PURE__*/_react["default"].createElement(Row, {
      className: "group-row"
    }, /*#__PURE__*/_react["default"].createElement(Col, {
      span: "14"
    }, (0, _locale.t)("tool-video.key_YlYhgW2xpure"), ":"), /*#__PURE__*/_react["default"].createElement(Col, {
      span: "10"
    }, item.playNow === true ? (0, _locale.t)('tool-video.key_YlYhgW2xpurd') : (0, _locale.t)('tool-video.key_YlYhgW2xcurd'))));
  })), /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
    className: "CComputed-dialog",
    visible: dialogConfig.visible,
    title: dialogConfig.title,
    footerAlign: "right",
    onClose: closeDialog,
    footer: [/*#__PURE__*/_react["default"].createElement(_button["default"], {
      onClick: saveGroupData,
      type: "primary"
    }, (0, _locale.t)('setter.ok')), /*#__PURE__*/_react["default"].createElement(_button["default"], {
      style: {
        marginLeft: '10px'
      },
      onClick: closeDialog
    }, (0, _locale.t)('setter.cancel'))]
  }, /*#__PURE__*/_react["default"].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 = (0, _react.useState)(groupItem || createNewGroupItem()),
    group = _useState4[0],
    setGroup = _useState4[1];
  (0, _react.useEffect)(function () {
    onChange(group);
  }, [group]);
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)("page.groupId") + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
    style: {
      width: "100%"
    },
    value: group.groupId,
    disabled: true
  })), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)("tool-video.groupName") + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
    style: {
      width: "100%"
    },
    value: group.groupName,
    onChange: function onChange(e) {
      setGroup((0, _extends2["default"])({}, group, {
        groupName: e
      }));
    }
  })), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)('tool-video.key_YlYhgW2xpure') + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
    defaultValue: group.playNow,
    value: group.playNow,
    placeholder: (0, _locale.t)("setter.selectPlaceHolder"),
    notFoundContent: (0, _locale.t)('setter.notFoundContent'),
    onChange: function onChange(e) {
      setGroup((0, _extends2["default"])({}, group, {
        playNow: e
      }));
    }
  }, /*#__PURE__*/_react["default"].createElement(Option, {
    value: true
  }, (0, _locale.t)('tool-video.key_YlYhgW2xpurd')), /*#__PURE__*/_react["default"].createElement(Option, {
    value: false
  }, (0, _locale.t)('tool-video.key_YlYhgW2xcurd')))), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (display === _formKeyType.VideoMade.Video ? (0, _locale.t)("tool-video.key_YlYhgW2begin") : (0, _locale.t)("tool-video.key_YlYhgW2opens")) + ": ",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
    min: 0,
    value: group.beginTime,
    precision: 3,
    onChange: function onChange(e) {
      setGroup((0, _extends2["default"])({}, group, {
        beginTime: e,
        endTime: e + 1
      }));
    }
  })), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (display === _formKeyType.VideoMade.Video ? (0, _locale.t)("tool-video.key_YlYhgW2xUend") : (0, _locale.t)("tool-video.key_YlYhgW2overs")) + ": ",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
    min: group.beginTime + 1,
    max: display === _formKeyType.VideoMade.VideoFrames ? imgArrList.length : '-',
    precision: 3,
    value: group.endTime,
    onChange: function onChange(e) {
      setGroup((0, _extends2["default"])({}, group, {
        endTime: e
      }));
    }
  })), /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)('tool-video.key_YlYhgW2xUCst') + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement(RadioGroup, {
    value: group.loop,
    onChange: function onChange(e) {
      setGroup((0, _extends2["default"])({}, group, {
        loop: e
      }));
    }
  }, /*#__PURE__*/_react["default"].createElement(_radio["default"], {
    id: _type.groupModeType.single,
    value: true
  }, /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: '#fff'
    }
  }, (0, _locale.t)('tool-video.key_YlYhgW2xUyes'))), /*#__PURE__*/_react["default"].createElement(_radio["default"], {
    id: _type.groupModeType.schedule,
    value: false
  }, /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: '#fff'
    }
  }, (0, _locale.t)('tool-video.key_YlYhgW2xUCno'))))), group.loop ? /*#__PURE__*/_react["default"].createElement(_boxSlotComponent["default"], {
    title: (0, _locale.t)("tool-video.key_YlYhgW2xUCen") + ":",
    titleStyle: {
      color: '#fff'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
    value: group.loopNum,
    onChange: function onChange(e) {
      setGroup((0, _extends2["default"])({}, group, {
        loopNum: e
      }));
    }
  }), /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: "#ffffff",
      marginLeft: "5px"
    }
  }, "(", (0, _locale.t)('tool-video.key_YlYhgW2xUple'), ")"))) : '');
};
var _default = exports["default"] = /*#__PURE__*/function (_Component) {
  function _default() {
    return _Component.apply(this, arguments) || this;
  }
  (0, _inheritsLoose2["default"])(_default, _Component);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/_react["default"].createElement(CVideoStepsSetter, this.props);
  };
  return _default;
}(_react.Component);