/**
 * ResponsiveText Component
 * Automatically adjusts text size and truncation based on screen size
 */

import React from 'react';
import { TextOverflowPrevention, getScreenSize, overflowClasses } from '../../../utils/textUtils';

export interface ResponsiveTextProps {
  text: string;
  maxLength?: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
  };
  className?: string;
  title?: string;
  truncationType?: 'statusCard' | 'production' | 'mobile';
  textType?: 'title' | 'subtitle' | 'label' | 'metadata' | 'action';
  showTooltip?: boolean;
  as?: keyof JSX.IntrinsicElements;
}

export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  text,
  maxLength,
  className = '',
  title,
  truncationType = 'statusCard',
  textType = 'title',
  showTooltip = true,
  as: Component = 'span'
}) => {
  const screenSize = React.useMemo(() => getScreenSize(), []);

  // Get truncation engine based on type
  const getTruncationEngine = () => {
    switch (truncationType) {
      case 'mobile':
        return TextOverflowPrevention.mobile;
      case 'production':
        return TextOverflowPrevention.production;
      default:
        return TextOverflowPrevention.statusCard;
    }
  };

  const engine = getTruncationEngine();

  // Get truncated text based on text type
  const getTruncatedText = () => {
    if (maxLength) {
      const currentMaxLength = maxLength[screenSize] || maxLength.desktop || text.length;
      return text.length > currentMaxLength
        ? text.substring(0, currentMaxLength - 3) + '...'
        : text;
    }

    // Use predefined truncation methods
    switch (textType) {
      case 'title':
        return engine.title ? engine.title(text) : text;
      case 'subtitle':
        return engine.subtitle ? engine.subtitle(text) : text;
      case 'label':
        return engine.primaryValueLabel ? engine.primaryValueLabel(text) : text;
      case 'metadata':
        return engine.metadataItem ? engine.metadataItem(text) : text;
      case 'action':
        return engine.actionLabel ? engine.actionLabel(text) : text;
      default:
        return text;
    }
  };

  const truncatedText = getTruncatedText();
  const shouldShowTooltip = showTooltip && truncatedText !== text;

  return (
    <Component
      className={`${overflowClasses.truncate} ${className}`}
      title={shouldShowTooltip ? (title || text) : title}
    >
      {truncatedText}
    </Component>
  );
};

export default ResponsiveText;