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

interface ImageBlockProps {
  src?: string;
  alt?: string;
  width?: 'auto' | 'full' | '1/2' | '1/3' | '2/3' | '1/4' | '3/4';
  height?: 'auto' | '32' | '48' | '64' | '80' | '96';
  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down';
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
  className?: string;
}

export const ImageBlock: React.FC<ImageBlockProps> = ({
  src = 'https://via.placeholder.com/400x300?text=Add+Image',
  alt = 'Image',
  width = 'full',
  height = 'auto',
  objectFit = 'cover',
  rounded = 'lg',
  className = ''
}) => {
  const { connectors: { connect, drag }, actions: { setProp: _setProp } } = useNode();

  const widthClasses = {
    auto: 'w-auto',
    full: 'w-full',
    '1/2': 'w-1/2',
    '1/3': 'w-1/3',
    '2/3': 'w-2/3',
    '1/4': 'w-1/4',
    '3/4': 'w-3/4'
  };

  const heightClasses = {
    auto: 'h-auto',
    '32': 'h-32',
    '48': 'h-48',
    '64': 'h-64',
    '80': 'h-80',
    '96': 'h-96'
  };

  const objectFitClasses = {
    cover: 'object-cover',
    contain: 'object-contain',
    fill: 'object-fill',
    'scale-down': 'object-scale-down'
  };

  const roundedClasses = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    xl: 'rounded-xl',
    '2xl': 'rounded-2xl',
    full: 'rounded-full'
  };

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`p-2 ${className}`}
    >
      <img
        src={src}
        alt={alt}
        className={`
          ${widthClasses[width]}
          ${heightClasses[height]}
          ${objectFitClasses[objectFit]}
          ${roundedClasses[rounded]}
          shadow-lg
        `}
        onError={(e) => {
          (e.target as HTMLImageElement).src = 'https://via.placeholder.com/400x300?text=Image+Not+Found';
        }}
      />
    </div>
  );
};

ImageBlock.craft = {
  displayName: 'Image Block',
  props: {
    src: 'https://via.placeholder.com/400x300?text=Add+Image',
    alt: 'Image',
    width: 'full',
    height: 'auto',
    objectFit: 'cover',
    rounded: 'lg',
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Image URL
          </label>
          <input
            type="url"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="https://..."
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Alt Text
          </label>
          <input
            type="text"
            className="w-full px-3 py-2 border border-gray-300 rounded-md"
            placeholder="Describe the image"
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Width
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="auto">Auto</option>
            <option value="full">Full Width</option>
            <option value="1/2">Half Width</option>
            <option value="1/3">One Third</option>
            <option value="2/3">Two Thirds</option>
            <option value="1/4">One Quarter</option>
            <option value="3/4">Three Quarters</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Height
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="auto">Auto</option>
            <option value="32">8rem</option>
            <option value="48">12rem</option>
            <option value="64">16rem</option>
            <option value="80">20rem</option>
            <option value="96">24rem</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Object Fit
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="cover">Cover</option>
            <option value="contain">Contain</option>
            <option value="fill">Fill</option>
            <option value="scale-down">Scale Down</option>
          </select>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Border Radius
          </label>
          <select className="w-full px-3 py-2 border border-gray-300 rounded-md">
            <option value="none">None</option>
            <option value="sm">Small</option>
            <option value="md">Medium</option>
            <option value="lg">Large</option>
            <option value="xl">Extra Large</option>
            <option value="2xl">2X Large</option>
            <option value="full">Full (Circle)</option>
          </select>
        </div>
      </div>
    )
  }
};