/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Fragment, useEffect, useRef } from 'react';
import { FormattedMessage } from 'react-intl-next';
import { di } from 'react-magnetic-di';
import { RovoIcon } from '@atlaskit/logo';
import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
import { SmartLinkDirection } from '../../../../../../constants';
import { messages } from '../../../../../../messages';
import useAISummaryAction from '../../../../../../state/hooks/use-ai-summary-action';
import AISummary from '../../../../../common/ai-summary';
import AIFooter from '../../../../../common/ai-summary/ai-footer';
import MotionWrapper from '../../../common/motion-wrapper';
import Block from '../../block';
import AIEventSummaryViewed from '../ai-event-summary-viewed';
import { EllipsesAnimation } from '../assets/ellipses';
const styles = null;
const newStyles = {
  iconWrapper: "_19bv1b66 _u5f3utpp _1e0c1txw _4cvr1h6o",
  placeholderWrapper: "_1e0c1txw _4cvr1h6o",
  summaryWrapper: "_ca0q1b66 _1e0c1txw",
  ellipsesContainer: "_19bv1b66"
};
const AISummaryBlockResolvedView = props => {
  const {
    testId,
    aiSummaryMinHeight = 0,
    placeholder,
    url
  } = props;
  const {
    state: {
      content,
      status
    }
  } = useAISummaryAction(url);
  const showAISummary = status === 'done' ||
  // We want to display the AI Summary component only when there is content available during the loading process.
  status === 'loading' && !!content;
  const isSummarisedOnMountRef = useRef(status === 'done');
  const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
  if (!showAISummary) {
    return /*#__PURE__*/React.createElement(Fragment, null, placeholder);
  }
  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
    direction: SmartLinkDirection.Vertical,
    testId: `${testId}-resolved-view`,
    className: ax(["_1reoewfl _18m9ewfl"])
  }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
    fromCache: isSummarisedOnMountRef.current
  }), /*#__PURE__*/React.createElement(MotionWrapper, {
    minHeight: minHeight,
    show: showAISummary,
    showTransition: !isSummarisedOnMountRef.current
  }, /*#__PURE__*/React.createElement(AISummary, {
    testId: `${testId}-ai-summary`,
    minHeight: minHeight,
    content: content
  })));
};
export const RovoSummaryBlockResolvedView = props => {
  const {
    testId,
    aiSummaryMinHeight = 0,
    url
  } = props;
  const {
    state: {
      content,
      status
    },
    summariseUrl
  } = useAISummaryAction(url);
  const showAISummary = status === 'done' ||
  // We want to display the AI Summary component only when there is content available during the loading process.
  status === 'loading' && !!content;
  const isSummarisedOnMountRef = useRef(status === 'done');
  useEffect(() => {
    if (status !== 'ready' || isSummarisedOnMountRef.current) {
      return;
    }
    isSummarisedOnMountRef.current = true;
    summariseUrl();
  }, [status, summariseUrl]);
  const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
  if (status === 'error') {
    return null;
  }
  if (!showAISummary) {
    return /*#__PURE__*/React.createElement(Inline, {
      testId: `${testId}-placeholder`,
      xcss: newStyles.placeholderWrapper
    }, /*#__PURE__*/React.createElement("div", {
      className: ax([newStyles.iconWrapper])
    }, /*#__PURE__*/React.createElement(RovoIcon, {
      shouldUseHexLogo: true,
      size: 'xxsmall'
    })), /*#__PURE__*/React.createElement(Text, {
      size: "small",
      color: "color.text"
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.rovo_summary_loading)), /*#__PURE__*/React.createElement(Box, {
      xcss: newStyles.ellipsesContainer
    }, /*#__PURE__*/React.createElement(EllipsesAnimation, {
      isAnimated: true
    })));
  }
  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
    direction: SmartLinkDirection.Vertical,
    testId: `${testId}-resolved-view`,
    className: ax(["_1reoewfl _18m9ewfl"])
  }), /*#__PURE__*/React.createElement(Inline, {
    xcss: newStyles.summaryWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([newStyles.iconWrapper])
  }, /*#__PURE__*/React.createElement(RovoIcon, {
    shouldUseHexLogo: true,
    size: 'xxsmall'
  })), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
    fromCache: isSummarisedOnMountRef.current
  }), /*#__PURE__*/React.createElement(MotionWrapper, {
    minHeight: minHeight,
    show: showAISummary,
    showTransition: !isSummarisedOnMountRef.current
  }, /*#__PURE__*/React.createElement(AISummary, {
    testId: `${testId}-ai-summary`,
    minHeight: minHeight,
    content: content
  }), status === 'done' && /*#__PURE__*/React.createElement(AIFooter, null))));
};
export default AISummaryBlockResolvedView;