import React from 'react';
import { useNode } from '@craftjs/core';
import ContentEditable from 'react-contenteditable';

interface TextBlockProps {
  text?: string;
  fontSize?: 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
  textAlign?: 'left' | 'center' | 'right';
  color?: 'slate-900' | 'slate-600' | 'slate-500' | 'white';
  className?: string;
}

export const TextBlock: React.FC<TextBlockProps> = ({
  text = 'Edit this text...',
  fontSize = 'base',
  fontWeight = 'normal',
  textAlign = 'left',
  color = 'slate-900',
  className = ''
}) => {
  const { connectors: { connect, drag }, actions: { setProp } } = useNode();

  const fontSizeClasses = {
    sm: 'text-sm',
    base: 'text-base',
    lg: 'text-lg',
    xl: 'text-xl',
    '2xl': 'text-2xl',
    '3xl': 'text-3xl'
  };

  const fontWeightClasses = {
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold'
  };

  const textAlignClasses = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right'
  };

  const colorClasses = {
    'slate-900': 'text-slate-900',
    'slate-600': 'text-slate-600',
    'slate-500': 'text-slate-500',
    'white': 'text-white'
  };

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`p-2 ${className}`}
    >
      <ContentEditable
        html={text}
        onChange={(e) => setProp((props: { text: string }) => props.text = e.target.value)}
        className={`
          outline-none
          ${fontSizeClasses[fontSize]}
          ${fontWeightClasses[fontWeight]}
          ${textAlignClasses[textAlign]}
          ${colorClasses[color]}
        `}
      />
    </div>
  );
};

TextBlock.craft = {
  displayName: 'Text Block',
  props: {
    text: 'Edit this text...',
    fontSize: 'base',
    fontWeight: 'normal',
    textAlign: 'left',
    color: 'slate-900',
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Font Size
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="sm">Small</option>
            <option value="base">Base</option>
            <option value="lg">Large</option>
            <option value="xl">Extra Large</option>
            <option value="2xl">2X Large</option>
            <option value="3xl">3X Large</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Font Weight
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="normal">Normal</option>
            <option value="medium">Medium</option>
            <option value="semibold">Semibold</option>
            <option value="bold">Bold</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Text Alignment
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Text Color
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="slate-900">Dark</option>
            <option value="slate-600">Medium</option>
            <option value="slate-500">Light</option>
            <option value="white">White</option>
          </select>
        </div>
      </div>
    )
  }
};