import "choerodon-ui/lib/message/style";
import _message from "choerodon-ui/lib/message";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

/* eslint-disable max-len */
import React, { useCallback, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { get } from 'lodash';
import { Droppable, Draggable, DragDropContext } from 'react-beautiful-dnd';
import EditColumn from "./components/eidtColumn";
import { usePipelineStageEditStore } from "./stores";
var defaultData = [{
  name: '构建',
  sequence: 1,
  jobList: [],
  type: 'CI',
  parallel: 1,
  triggerType: ''
}, {
  name: '发布',
  sequence: 2,
  jobList: [],
  type: 'CI',
  parallel: 2,
  triggerType: ''
}, {
  name: '部署',
  sequence: 3,
  jobList: [],
  type: 'CD',
  parallel: 3,
  triggerType: 'auto'
}];
export default observer(function () {
  var _usePipelineStageEdit = usePipelineStageEditStore(),
      pipelineId = _usePipelineStageEdit.pipelineId,
      editBlockStore = _usePipelineStageEdit.editBlockStore,
      appServiceId = _usePipelineStageEdit.appServiceId,
      appServiceName = _usePipelineStageEdit.appServiceName,
      appServiceCode = _usePipelineStageEdit.appServiceCode,
      appServiceType = _usePipelineStageEdit.appServiceType,
      image = _usePipelineStageEdit.image,
      propsDataSource = _usePipelineStageEdit.dataSource,
      isEdit = _usePipelineStageEdit.isEdit;

  var setStepData = editBlockStore.setStepData,
      getStepData = editBlockStore.getStepData,
      editStepLists = editBlockStore.editStepLists,
      getViewData = editBlockStore.getViewData;
  useEffect(function () {
    var stageList = [];

    if (isEdit) {
      stageList = _toConsumableArray(getViewData);
    } else if (propsDataSource) {
      var tempLists = get(propsDataSource, 'stageList') || [];
      stageList = _toConsumableArray(tempLists);
    } else if (appServiceId && appServiceType === 'test') {
      stageList = _toConsumableArray(defaultData.slice(0, 1));
    } else {
      stageList = [].concat(defaultData);
    }

    setStepData(stageList);
  }, [appServiceId, appServiceType, getViewData, isEdit, propsDataSource]);
  var renderColumn = useCallback(function () {
    var dataSource = getStepData;

    if (dataSource && dataSource.length > 0) {
      return dataSource.map(function (item, index) {
        var _dataSource, _dataSource2;

        var nextStageType = ((_dataSource = dataSource[index + 1]) === null || _dataSource === void 0 ? void 0 : _dataSource.type) && ((_dataSource2 = dataSource[index + 1]) === null || _dataSource2 === void 0 ? void 0 : _dataSource2.type.toUpperCase());
        return /*#__PURE__*/React.createElement(Draggable, {
          key: "dropStages-".concat(item.sequence),
          draggableId: "dropStages-".concat(item.sequence),
          index: index
        }, function (dragProvided, snapshotinner) {
          return /*#__PURE__*/React.createElement(EditColumn, Object.assign({}, item, {
            snapshotinner: snapshotinner,
            innerRef: dragProvided.innerRef,
            dragProvided: dragProvided,
            stagesSource: dataSource,
            columnIndex: index,
            key: item.id,
            isLast: String(index) === String(dataSource.length - 1),
            isFirst: index === 0,
            nextStageType: nextStageType,
            pipelineId: pipelineId,
            appServiceId: appServiceId,
            appServiceName: appServiceName,
            appServiceCode: appServiceCode,
            appServiceType: appServiceType,
            image: image
          }));
        });
      });
    }

    return [];
  }, [getStepData, pipelineId]);

  function swap(arr, from, to) {
    arr.splice(to, 0, arr.splice(from, 1)[0]);
    return arr;
  }

  function onColomnDragEnd(data) {
    var _getStepData$source$i, _getStepData$destinat;

    var source = data.source,
        destination = data.destination;

    if (!destination) {
      return;
    }

    var sourceType = (_getStepData$source$i = getStepData[source.index]) === null || _getStepData$source$i === void 0 ? void 0 : _getStepData$source$i.type;
    var destType = (_getStepData$destinat = getStepData[destination.index]) === null || _getStepData$destinat === void 0 ? void 0 : _getStepData$destinat.type;

    if (sourceType !== destType) {
      _message.error('CI阶段必须置于CD阶段之前');

      return;
    }

    var arr = _toConsumableArray(swap(getStepData, source.index, destination.index));

    arr.map(function (item, index) {
      // eslint-disable-next-line no-param-reassign
      item.sequence = index;
      return item;
    });
    editStepLists(arr);
  }

  var getListStyle = function getListStyle(isDraggingOver) {
    return {
      border: isDraggingOver ? '2px dotted #5266d4' : 'none',
      borderRadius: isDraggingOver ? '3px' : '0',
      padding: '2px',
      background: isDraggingOver ? 'rgba(82, 102, 212, 0.1)' : 'none'
    };
  };

  function renderBlock() {
    return /*#__PURE__*/React.createElement(DragDropContext, {
      onDragEnd: onColomnDragEnd
    }, /*#__PURE__*/React.createElement(Droppable, {
      droppableId: "dropStages",
      direction: "horizontal"
    }, function (provided, snapshot) {
      return /*#__PURE__*/React.createElement("div", Object.assign({
        className: "c7n-piplineManage-edit",
        ref: provided.innerRef
      }, provided.droppableProps, {
        style: getListStyle(snapshot.isDraggingOver)
      }), renderColumn(), provided.placeholder);
    }));
  }

  return renderBlock();
});