/* codeViewerRenderer-compiled.tsx generated by @compiled/babel-plugin v0.38.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./codeViewerRenderer-compiled.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

import { Component, forwardRef } from 'react';
import { Outcome } from '../../domain';
import { Spinner } from '../../loading';
import CodeBlock from '@atlaskit/code/block';
import ErrorMessage from '../../errorMessage';
import { MediaViewerError } from '../../errors';
import { lineCount } from './util';
const codeViewWrapperStyles = null;
const codeViewerHeaderBarStyles = null;
const codeViewerHTMLStyles = null;

// Based on some basic benchmarking with @atlaskit/code it was found that ~10,000 lines took around ~5secs to render, which locks the main thread.
// Therefore we set a hard limit on the amount of lines which we apply formatting to,
// otherwise the "text" language will be used which is plain and more performant
const MAX_FORMATTED_LINES = 10000;
// Use plain html to render code file if their size exceeds 5MB.
// Required by https://product-fabric.atlassian.net/browse/MEX-1788
const MAX_FILE_SIZE_USE_CODE_VIEWER = 5 * 1024 * 1024;
export const CodeViewWrapper = /*#__PURE__*/forwardRef(({
  children,
  'data-testid': testId
}, ref) => {
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    ref: ref,
    className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk15j7"])
  }, children);
});
export const CodeViewerHeaderBar = () => {
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_4t3i8ved _bfhk1nox"])
  });
};
const initialState = {
  doc: Outcome.pending()
};
export class CodeViewRenderer extends Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", initialState);
  }
  componentDidMount() {
    this.init();
  }
  componentWillUnmount() {}
  async init() {
    const {
      src,
      onSuccess,
      onError
    } = this.props;
    try {
      this.setState({
        doc: Outcome.successful(src)
      });
      if (onSuccess) {
        onSuccess();
      }
    } catch (error) {
      const mediaError = new MediaViewerError('codeviewer-load-src', error instanceof Error ? error : undefined);
      this.setState({
        doc: Outcome.failed(mediaError)
      });
      if (onError) {
        onError(mediaError);
      }
    }
  }
  render() {
    const {
      item,
      src,
      language,
      testId
    } = this.props;
    //Use src to measure the real file size
    //item.size is incorrect for archives with mutiple docs inside.
    const fileSize = new Blob([src]).size;
    const codeViewer = lineCount(src) > MAX_FORMATTED_LINES || fileSize > MAX_FILE_SIZE_USE_CODE_VIEWER ? /*#__PURE__*/React.createElement("code", {
      "data-testid": "code-block",
      className: ax(["_11c8dcr7 _1e0c1txw _1reo1wug _o572qvpr _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"])
    }, src) : /*#__PURE__*/React.createElement(CodeBlock, {
      language: language,
      text: src,
      testId: "code-block"
    });
    return this.state.doc.match({
      pending: () => /*#__PURE__*/React.createElement(Spinner, null),
      successful: () => /*#__PURE__*/React.createElement(CodeViewWrapper, {
        "data-testid": testId
      }, /*#__PURE__*/React.createElement(CodeViewerHeaderBar, null), codeViewer),
      failed: error => /*#__PURE__*/React.createElement(ErrorMessage, {
        fileId: item.id,
        fileState: item,
        error: error,
        supressAnalytics: true // item-viewer.tsx will send
      })
    });
  }
}