import "choerodon-ui/pro/lib/icon/style";
import _Icon from "choerodon-ui/pro/lib/icon";
import "choerodon-ui/pro/lib/progress/style";
import _Progress from "@hzero-front-ui/c7n-ui/lib/ProgressPro";
import "choerodon-ui/pro/lib/tooltip/style";
import _Tooltip from "choerodon-ui/pro/lib/tooltip";
import "choerodon-ui/lib/button/style";
import _Button from "choerodon-ui/lib/button";
import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

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

/* eslint-disable */
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import _ from 'lodash';
import { FormattedMessage } from 'react-intl';
import ReactCodeMirror from 'react-codemirror';
import { useDeployLogMainStore } from "./stores";
import Loading from "../../../../../../components/loading";
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/base16-dark.css';
import "./index.less";
var logOptions = {
  theme: 'base16-dark',
  mode: 'textile',
  readOnly: true,
  lineNumbers: true,
  lineWrapping: true
};
var LogItem = observer(function (props) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      flag = _useState2[0],
      changeFlag = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      fullScreen = _useState4[0],
      setFullScreen = _useState4[1];

  var event = props.event,
      name = props.name,
      jobPodStatus = props.jobPodStatus,
      log = props.log,
      key = props.key,
      formatMessage = props.formatMessage;
  var editorLog;
  /**
  * 任意键退出全屏查看
  */

  function setNormal() {
    if (!editorLog) return;
    var cm = editorLog.getCodeMirror();
    var wrap = cm.getWrapperElement();
    wrap.className = wrap.className.replace(/\s*CodeMirror-fullScreen\b/, '');
    setFullScreen(false);
    document.documentElement.style.overflow = '';
    var info = cm.state.fullScreenRestore;
    wrap.style.width = info.width;
    wrap.style.height = info.height;
    window.scrollTo(info.scrollLeft, info.scrollTop);
    cm.refresh();
    window.removeEventListener('keydown', function (e) {
      setNormal();
    });
  }
  /**
   *  全屏查看日志
   */


  function openFullScreen() {
    var cm = editorLog.getCodeMirror();
    var wrap = cm.getWrapperElement();
    cm.state.fullScreenRestore = {
      scrollTop: window.pageYOffset,
      scrollLeft: window.pageXOffset,
      width: wrap.style.width,
      height: wrap.style.height
    };
    wrap.style.width = '';
    wrap.style.height = 'auto';
    wrap.className += ' CodeMirror-fullScreen';
    setFullScreen(true);
    document.documentElement.style.overflow = 'hidden';
    cm.refresh();
    window.addEventListener('keydown', function (e) {
      setNormal();
    });
  }

  function openLogDetail() {
    _Modal.open({
      key: _Modal.key(),
      title: formatMessage({
        id: 'container.log.header.title'
      }),
      drawer: true,
      okText: formatMessage({
        id: 'close'
      }),
      okCancel: false,
      style: {
        width: 1000
      },
      children: /*#__PURE__*/React.createElement("div", {
        className: fullScreen ? 'c7ncd-log-sidebar-content_full' : 'c7ncd-log-sidebar-content'
      }, /*#__PURE__*/React.createElement("div", {
        className: "c7ncd-term-fullscreen"
      }, /*#__PURE__*/React.createElement(_Tooltip, {
        title: formatMessage({
          id: 'c7ncd.deployment.instance.cases.fullScreen'
        })
      }, /*#__PURE__*/React.createElement(_Button, {
        className: "c7ncd-term-fullscreen-button",
        type: "primary",
        funcType: "flat",
        shape: "circle",
        icon: "fullscreen",
        onClick: openFullScreen
      }))), /*#__PURE__*/React.createElement("div", {
        className: "c7n-term-wrap"
      }, /*#__PURE__*/React.createElement(ReactCodeMirror, {
        ref: function ref(editor) {
          editorLog = editor;
        },
        value: log,
        options: logOptions,
        className: "c7n-log-editor"
      })))
    });
  }

  function handleExpand() {
    changeFlag(!flag);
  }

  return /*#__PURE__*/React.createElement("div", {
    key: key,
    className: "operation-content-step"
  }, /*#__PURE__*/React.createElement("div", {
    className: "content-step-title"
  }, jobPodStatus === 'running' ? /*#__PURE__*/React.createElement(_Progress, {
    type: "loading"
  }) : /*#__PURE__*/React.createElement(_Icon, {
    type: "wait_circle",
    className: "content-step-icon-".concat(jobPodStatus)
  }), /*#__PURE__*/React.createElement("span", {
    className: "content-step-title-text"
  }, name), log && /*#__PURE__*/React.createElement(_Tooltip, {
    title: formatMessage({
      id: 'c7ncd.deployment.instance.cases.log'
    }),
    placement: "bottom"
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "find_in_page",
    onClick: openLogDetail
  }))), /*#__PURE__*/React.createElement("div", {
    className: "content-step-des"
  }, /*#__PURE__*/React.createElement("pre", {
    className: !flag ? 'content-step-des-hidden' : ''
  }, event), event && event.split('\n').length > 4 ? /*#__PURE__*/React.createElement("a", {
    onClick: handleExpand
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: flag ? 'shrink' : 'expand'
  })) : null));
});
var Cases = observer(function () {
  var _useDeployLogMainStor = useDeployLogMainStore(),
      projectId = _useDeployLogMainStor.projectId,
      cdRecordId = _useDeployLogMainStor.cdRecordId,
      stageId = _useDeployLogMainStor.stageId,
      jobRecordId = _useDeployLogMainStor.jobRecordId,
      _useDeployLogMainStor2 = _useDeployLogMainStor.deployLogStore,
      loadDeployLogData = _useDeployLogMainStor2.loadDeployLogData,
      logContentLoading = _useDeployLogMainStor2.logContentLoading,
      getLogData = _useDeployLogMainStor2.getLogData,
      formatMessage = _useDeployLogMainStor.intl.formatMessage;

  useEffect(function () {
    loadDeployLogData(projectId, cdRecordId, stageId, jobRecordId);
  }, []);

  function getContent() {
    return logContentLoading ? /*#__PURE__*/React.createElement(Loading, {
      display: true
    }) : /*#__PURE__*/React.createElement("div", {
      className: "case-operation-main"
    }, getLogData.length > 0 && getLogData.map(function (item) {
      return /*#__PURE__*/React.createElement(LogItem, Object.assign({}, item, {
        formatMessage: formatMessage
      }));
    }));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "c7ncd-pipeline-deployLog"
  }, getContent());
});
export default Cases;