/**
 * ZaloPreviewContent Component
 *
 * Renders Zalo template preview with external preview link
 * Matches exact structure from TemplatePreview/index.js (lines 1356-1385)
 * Zalo uses external preview URL that opens in a new tab
 */

import React from 'react';
import PropTypes from 'prop-types';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import { handlePreviewInNewTab } from '../../../utils/common';
import zaloMessages from '../../../v2Containers/Zalo/messages';

const ZaloPreviewContent = ({
  content,
  formatMessage,
  fullMode = true, // Default to creative mode (fullMode = true)
}) => {
  // Extract Zalo content - templatePreviewUrl from content object
  // Content can be: content.templatePreviewUrl or content.template?.previewUrl
  const templatePreviewUrl = content?.templatePreviewUrl || content?.template?.previewUrl || '';

  // Handle preview link click - matches TemplatePreview handlePreview function
  const handlePreview = () => {
    if (templatePreviewUrl) {
      handlePreviewInNewTab(templatePreviewUrl);
    }
  };

  // Render Zalo preview - exact structure from TemplatePreview (lines 1356-1385)
  return (
    <CapRow
      className={`zalo-preview-container ${
        fullMode
          ? "zalo-preview-container-creative"
          : "zalo-preview-container-campaign"
      }`}
    >
      <CapRow>
        <CapLabel className="preview-head">
          {formatMessage(zaloMessages.previewHead)}
        </CapLabel>
      </CapRow>
      <CapRow>
        <CapLabel className="preview-text">
          {formatMessage(zaloMessages.previewText)}
        </CapLabel>
      </CapRow>
      <CapRow>
        <CapLabel
          data-testid="preview-link-button"
          onClick={handlePreview}
          className="preview-link"
        >
          {formatMessage(zaloMessages.openPreview)}
          {' '}
          <CapIcon type="open-in-new-light"></CapIcon>
        </CapLabel>
      </CapRow>
    </CapRow>
  );
};

ZaloPreviewContent.propTypes = {
  content: PropTypes.shape({
    templatePreviewUrl: PropTypes.string,
    template: PropTypes.shape({
      previewUrl: PropTypes.string,
    }),
  }),
  formatMessage: PropTypes.func.isRequired,
  fullMode: PropTypes.bool, // Determines if it's creative mode (true) or campaign mode (false)
};

ZaloPreviewContent.defaultProps = {
  content: {},
  fullMode: true, // Default to creative mode
};

export default ZaloPreviewContent;
