/* eslint-disable max-len */
import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import isEqual from 'lodash/isEqual';
import DetailHeader from "./components/detailHeader";
import DetailColumn from "./components/detailColumn";
import Loading from "../../../../components/loading";
import EmptyPage from "../../../../components/empty-page";
import { usePipelineManageStore } from "../../stores";
import { usePipelineFlowStore } from "./stores";
export default observer(function (props) {
  var _usePipelineManageSto = usePipelineManageStore(),
      formatMessage = _usePipelineManageSto.intl.formatMessage,
      intlPrefix = _usePipelineManageSto.intlPrefix,
      mainStore = _usePipelineManageSto.mainStore,
      history = _usePipelineManageSto.history,
      location = _usePipelineManageSto.location,
      detailStore = _usePipelineManageSto.detailStore,
      projectId = _usePipelineManageSto.projectId,
      treeDs = _usePipelineManageSto.treeDs;

  var _usePipelineFlowStore = usePipelineFlowStore(),
      getSelectedMenu = _usePipelineFlowStore.getSelectedMenu,
      handleRefresh = _usePipelineFlowStore.handleRefresh;

  var treeStatus = getSelectedMenu.status,
      treeStageRecordVOList = getSelectedMenu.stageRecordVOS,
      devopsPipelineRecordRelId = getSelectedMenu.devopsPipelineRecordRelId,
      viewId = getSelectedMenu.viewId;
  var loadDetailData = detailStore.loadDetailData,
      getDetailLoading = detailStore.getDetailLoading,
      getDetailData = detailStore.getDetailData;
  useEffect(function () {
    devopsPipelineRecordRelId && loadDetailData(projectId, devopsPipelineRecordRelId);
  }, [projectId, devopsPipelineRecordRelId]); // stageRecordVOS: 各个详情阶段记录,包括ci和cd的
  // devopsCipiplineVO: 本流水线记录得信息

  var stageRecordVOS = getDetailData.stageRecordVOS,
      ciCdPipelineVO = getDetailData.ciCdPipelineVO,
      status = getDetailData.status,
      pipelineRecordId = getDetailData.gitlabPipelineId,
      gitlabTriggerRef = getDetailData.gitlabTriggerRef,
      commit = getDetailData.commit,
      recordDevopsPipelineRecordRelId = getDetailData.devopsPipelineRecordRelId,
      cdRecordId = getDetailData.cdRecordId,
      loadViewId = getDetailData.viewId;
  useEffect(function () {
    var treeStatusList = map(treeStageRecordVOList || [], 'status');
    var detailStatusList = map(stageRecordVOS || [], 'status');
    var treeIsEqual = status !== treeStatus || !isEqual(detailStatusList, treeStatusList);

    if (devopsPipelineRecordRelId === recordDevopsPipelineRecordRelId && treeIsEqual) {
      mainStore.setTreeDataPage(1);
      mainStore.setLoadedKeys([]);
      treeDs && treeDs.query();
    }
  }, [pipelineRecordId]);

  var renderStage = function renderStage() {
    return stageRecordVOS && stageRecordVOS.length > 0 ? stageRecordVOS.map(function (item) {
      var name = item.name,
          stageStatus = item.status,
          durationSeconds = item.durationSeconds,
          sequence = item.sequence,
          type = item.type,
          jobRecordVOList = item.jobRecordVOList,
          stageId = item.stageId;
      return /*#__PURE__*/React.createElement(DetailColumn, {
        key: sequence,
        piplineStageName: name,
        stageSeconds: durationSeconds,
        piplineStageStatus: stageStatus,
        history: history,
        location: location,
        handleRefresh: handleRefresh,
        stageType: type,
        jobRecordVOList: jobRecordVOList,
        stageId: stageId,
        cdRecordId: cdRecordId,
        viewId: viewId || loadViewId,
        gitlabPipelineId: pipelineRecordId
      });
    }) : /*#__PURE__*/React.createElement(EmptyPage, {
      title: formatMessage({
        id: status === 'skipped' ? "".concat(intlPrefix, ".record.empty.title") : "".concat(intlPrefix, ".record.empty.title.other")
      }),
      describe: formatMessage({
        id: status === 'skipped' ? "".concat(intlPrefix, ".record.empty.des") : "".concat(intlPrefix, ".record.empty.des.other")
      }),
      access: true
    });
  };

  return !getDetailLoading ? /*#__PURE__*/React.createElement("div", {
    className: "c7n-piplineManage"
  }, /*#__PURE__*/React.createElement(DetailHeader, {
    viewId: viewId || loadViewId,
    appServiceName: ciCdPipelineVO && ciCdPipelineVO.appServiceName,
    appServiceId: ciCdPipelineVO && ciCdPipelineVO.appServiceId,
    aHref: commit && commit.gitlabProjectUrl,
    triggerRef: gitlabTriggerRef,
    status: status,
    mainStore: mainStore,
    projectId: projectId
  }), /*#__PURE__*/React.createElement("div", {
    className: "c7n-piplineManage-detail"
  }, renderStage())) : /*#__PURE__*/React.createElement(Loading, {
    display: getDetailLoading
  });
});