import React from 'react';
import PropTypes from 'prop-types';
import NotificationContainer from './NotificationContainer';
import { getResolvedVariant } from './config/notificationMappings';
import { NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED } from './constants';
import './preview.scss';

/**
 * PreviewContent Component
 * 
 * Renders the preview area for web push notification.
 * Displays actual notification preview for macOS + Chrome combination.
 * For other OS/Browser combinations, shows the selection text.
 * 
 * This component wraps the NotificationContainer in a preview-specific
 * container (notification-preview) for the main preview area.
 * 
 * @param {string} notificationState - NOTIFICATION_STATE_COLLAPSED or NOTIFICATION_STATE_EXPANDED (default: NOTIFICATION_STATE_COLLAPSED)
 */

const PreviewContent = ({
  notificationTitle,
  notificationBody,
  url,
  selectedOS,
  selectedBrowser,
  notificationState = NOTIFICATION_STATE_COLLAPSED,
  imageSrc,
  brandIconSrc,
  buttons = [],
}) => {
  const resolvedVariant = getResolvedVariant(selectedOS, selectedBrowser, notificationState);

  return (
    <div className="preview-content">
      <div className="preview-content-wrapper">
        <div className={`notification-preview ${resolvedVariant ? '' : 'preview-unavailable'}`.trim()}>
          {resolvedVariant && (
            <NotificationContainer
              notificationTitle={notificationTitle}
              notificationBody={notificationBody}
              url={url}
              selectedOS={selectedOS}
              selectedBrowser={selectedBrowser}
              notificationState={resolvedVariant.stateKey}
              icon={resolvedVariant.variant.icon}
              supportsExpanded={resolvedVariant.stateConfig.supportsExpanded}
              enableMedia={resolvedVariant.stateConfig.showMedia}
              enableCtas={buttons.length > 0}
              className={resolvedVariant.variant.notificationClassName}
              imageSrc={imageSrc}
              brandIconSrc={brandIconSrc}
              buttons={buttons}
            />
          )}
        </div>
      </div>
    </div>
  );
};

PreviewContent.propTypes = {
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
  url: PropTypes.string,
  selectedOS: PropTypes.string.isRequired,
  selectedBrowser: PropTypes.string.isRequired,
  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
  imageSrc: PropTypes.string,
  brandIconSrc: PropTypes.string,
  buttons: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string,
      url: PropTypes.string,
      type: PropTypes.string,
    })
  ),
};

PreviewContent.defaultProps = {
  notificationTitle: '',
  notificationBody: '',
  url: '',
  imageSrc: '',
  brandIconSrc: '',
  buttons: [],
};

export default PreviewContent;

