import React, { CSSProperties } from 'react';
import { DraggablePropsType } from '../../components/Draggable/Draggable';

export const id = "text";
export const name = "文字";
export const version = "1.0.0"; 
type FontData = {
  content: string;
  fontSize?: number;       // 字体大小（px）
  fontFamily?: string;    // 字体类型
  color?: string;         // 字体颜色
  fontWeight?: number;    // 字重
  lineHeight?: number;    // 行高比例
  textAlign?: 'left' | 'center' | 'right'; // 对齐方式
  letterSpacing?: number; // 字间距（px）
  customStyles?: CSSProperties; // 自定义CSS扩展
};

interface ResponsiveTextProps {
  data: DraggablePropsType["data"] & FontData;
  className?: string;     // 外部容器类名
}

const Text: React.FC<ResponsiveTextProps> = ({ 
  data, 
  className 
}) => {
  // 合并默认样式与传入样式
  const textStyles: CSSProperties = {
    fontSize: `${data.fontSize || 16}px`,
    fontFamily: data.fontFamily || 'Arial, sans-serif',
    color: data.color || '#333',
    fontWeight: data.fontWeight || 400,
    lineHeight: data.lineHeight ? `${data.lineHeight}em` : '1.5',
    textAlign: data.textAlign || 'left',
    letterSpacing: `${data.letterSpacing || 0}px`,
    width: '100%',
    height: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: 'flex',
    alignItems: 'center',
    justifyContent: data.textAlign === 'center' ? 'center' : 
      data.textAlign === 'right' ? 'flex-end' : 'flex-start',
    ...data.customStyles
  };

  return (
    <div 
      className={className}
      style={{
        position: 'relative',
        width: '100%',
        height: '100%',
        minWidth: '50px', // 防止容器坍缩
        minHeight: '1em' // 最小高度保障
      }}
    >
      <div 
        style={{
          ...textStyles,
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-word',
          padding: '0.2em' // 防止文本贴边
        }}
        title={data.content} // 添加tooltip
      >
        {data.content}
      </div>
    </div>
  );
};

export default Text;