/**
 * ContentOverlay - Positioned HTML content within device frame
 */

import React from 'react';
import PropTypes from 'prop-types';
import { LAYOUT_TYPES, LAYOUT_POSITIONS, DEVICE_SCREEN_AREAS } from './constants';
import { DEVICE_TYPES } from '../../constants';

// Styles
import './_inAppPreviewPane.scss';

const ContentOverlay = ({
  layoutType = LAYOUT_TYPES.MODAL,
  content = '',
  device = DEVICE_TYPES.ANDROID,
  className = '',
  ...props
}) => {
  // Get the screen area for the current device
  const getScreenAreaStyles = () => {
    const screenArea = DEVICE_SCREEN_AREAS[device] || DEVICE_SCREEN_AREAS.ANDROID;

    return {
      position: 'absolute',
      top: screenArea.top,
      left: screenArea.left,
      width: screenArea.width,
      height: screenArea.height,
      // This creates the visible screen area within the device frame
      // Content will be positioned relative to this area
    };
  };

  const getOverlayStyles = () => {
    const position = LAYOUT_POSITIONS[layoutType] || LAYOUT_POSITIONS[LAYOUT_TYPES.MODAL];
    // Only return dynamic positioning styles - static styles are in SCSS
    return position;
  };


  const renderEmptyState = () => (
    <div className="content-overlay__empty-state">
      <div>
        <div className="content-overlay__empty-state__icon">📱</div>
        <div>HTML content will appear here</div>
        <div className="content-overlay__empty-state__meta">
          Layout: <strong>{layoutType}</strong>
        </div>
      </div>
    </div>
  );


  const hasContent = content && content.trim().length > 0;

  return (
    // Screen area container - positions content within the device screen bounds
    <div
      className="content-overlay__screen-area"
      style={getScreenAreaStyles()}
    >
      {/* Content overlay positioned within the screen area */}
      <div
        className={`content-overlay content-overlay--${layoutType.toLowerCase()} ${className}`}
        style={getOverlayStyles()}
        {...props}
      >
        {hasContent ? (
          <iframe
            srcDoc={content}
            title="InApp HTML Preview"
            sandbox="allow-scripts allow-same-origin"
          />
        ) : (
          renderEmptyState()
        )}
      </div>
    </div>
  );
};

ContentOverlay.propTypes = {
  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES)),
  content: PropTypes.string,
  device: PropTypes.oneOf(Object.values(DEVICE_TYPES)),
  className: PropTypes.string
};

export default ContentOverlay;
