/**
 * SmsPreviewContent Component
 *
 * Renders SMS message preview on Android and iOS device mockups
 * Based on the mock design with navigation bar, message bubble, and timestamp
 */

import React from 'react';
import PropTypes from 'prop-types';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
import CapImage from '@capillarytech/cap-ui-library/CapImage';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import { FormattedMessage } from 'react-intl';
import {
  ANDROID,
  IOS,
  ANDROID_DEVICE_NAME,
  IOS_DEVICE_NAME,
  TIME_FORMAT_HOUR_MODULO,
  TIME_FORMAT_MINUTE_PADDING_THRESHOLD,
  TIME_FORMAT_AM,
  TIME_FORMAT_PM,
} from '../constants';
import messages from '../messages';

// Import device mockup images
const smsMobileAndroid = require('../../../assets/Android.png');
const smsMobileIos = require('../../../assets/iOS.png');

const SmsPreviewContent = ({
  content,
  device,
  isUpdating,
  error,
  formatMessage,
  senderId,
  showHeader,
}) => {
  // Get device image based on device type
  const deviceImage = device === ANDROID ? smsMobileAndroid : smsMobileIos;
  const deviceName = device === ANDROID ? ANDROID_DEVICE_NAME : IOS_DEVICE_NAME;
  // Render loading state
  if (isUpdating) {
    return (
      <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
        <CapImage
          className="sms-device-image"
          src={deviceImage}
          alt={`${deviceName} Device`}
        />
        <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
          <CapRow type='flex' vertical noWrap align='middle' justify='center' className="sms-loading-container">
            <CapSpin size="large" />
            <CapRow useLegacy className="sms-loading-text">
              {formatMessage(messages.updatingPreview)}
            </CapRow>
          </CapRow>
        </CapRow>
      </CapRow>
    );
  }

  // Render error state
  if (error) {
    return (
      <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
        <CapImage
          className="sms-device-image"
          src={deviceImage}
          alt={`${deviceName} Device`}
        />
        <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
          <CapRow className="sms-error-container">
            <CapIcon type="exclamation-circle" className="exclamation-circle" />
            <CapRow useLegacy className="sms-error-text">
              {formatMessage(messages.previewError)}
            </CapRow>
            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
          </CapRow>
        </CapRow>
      </CapRow>
    );
  }

  // Get current time for timestamp
  const currentTime = new Date();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const ampm = hours >= TIME_FORMAT_HOUR_MODULO ? TIME_FORMAT_PM : TIME_FORMAT_AM;
  const displayHours = hours % TIME_FORMAT_HOUR_MODULO || TIME_FORMAT_HOUR_MODULO;
  const displayMinutes = minutes < TIME_FORMAT_MINUTE_PADDING_THRESHOLD ? `0${minutes}` : minutes;
  const timestamp = `${displayHours}:${displayMinutes} ${ampm}`;

  // Render normal SMS preview
  return (
    <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
      {/* Device Background Image */}
      <CapImage
        className="sms-device-image"
        src={deviceImage}
        alt={`${deviceName} Device`}
      />

      {/* Content Overlay */}
      <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
        {/* Navigation Bar */}
        <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
          <CapRow type='flex' align='middle' justify='center'>
            <CapIcon type="chevron-left" className="sms-back-arrow" />
            <CapLabel type="label15" className="sms-sender-id">
              {senderId || formatMessage(messages.senderId)}
            </CapLabel>
          </CapRow>
          <CapIcon type="more" className="sms-menu-icon" />
        </CapRow>

        {/* Date Separator */}
        <CapRow useLegacy className="sms-date-separator">
          <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
        </CapRow>

        {/* Message Bubble */}
        <CapRow className="sms-message-container">
          <CapRow useLegacy className="sms-message-bubble">
            <CapRow useLegacy className="sms-message-text">
              {content || formatMessage(messages.noContent)}
            </CapRow>
          </CapRow>
          <CapRow useLegacy className="sms-timestamp">
            {timestamp}
          </CapRow>
        </CapRow>
      </CapRow>
    </CapRow>
  );
};

SmsPreviewContent.propTypes = {
  content: PropTypes.string,
  device: PropTypes.oneOf([ANDROID, IOS]),
  isUpdating: PropTypes.bool,
  error: PropTypes.string,
  formatMessage: PropTypes.func.isRequired,
  senderId: PropTypes.string,
  showHeader: PropTypes.bool,
};

SmsPreviewContent.defaultProps = {
  content: '',
  device: ANDROID,
  isUpdating: false,
  error: null,
  senderId: null,
  showHeader: true,
};

export default SmsPreviewContent;
