import React from 'react';
import { useElementDrag } from './hooks/useElementDrag';
import { useElementSelection } from './hooks/useElementSelection';
import { getElementStyle } from './utils/elementUtils';
import './elements.css';

/**
 * Band element component
 * Represents a repeating section that iterates over data arrays
 */
function BandElement({
  element,
  isSelected,
  isSingleSelection,
  onSelect,
  onUpdate,
  onDelete,
  onDragStart,
  onDrag,
  charWidth,
  charHeight,
  toolMode,
  children // Child elements to render inside band (in design mode)
}) {
  // Use custom hooks for drag and selection
  const { isDragging, handleMouseDown: handleDragMouseDown } = useElementDrag({
    isSelected,
    onDragStart,
    onDrag,
    toolMode,
    constrainX: true // Only vertical dragging
  });

  const { handleClick } = useElementSelection({
    isSelected,
    onSelect,
    onDelete,
    toolMode
  });

  const handleMouseDown = (e) => {
    e.stopPropagation();
    if (!isSelected) {
      onSelect();
    }
    handleDragMouseDown(e, element.id);
  };

  // Get caption text
  const captionText = element.caption ||
    `${element.bandType}: ${element.dataSource || 'no data'}`;

  const style = {
    ...getElementStyle(element, charWidth, charHeight),
    borderTop: '2px dashed #667eea',
    borderBottom: '2px dashed #667eea',
    borderLeft: 'none',
    borderRight: 'none',
    backgroundColor: isSelected
      ? 'rgba(102, 126, 234, 0.08)'
      : 'rgba(200, 200, 200, 0.03)',
    boxSizing: 'border-box'
  };

  return (
    <div
      className={`band-element ${isSelected ? 'selected' : ''} ${isDragging ? 'dragging' : ''}`}
      style={style}
      onClick={handleClick}
      onMouseDown={handleMouseDown}
    >
      <div className="band-caption">
        {captionText}
      </div>
      {/* Render child elements inside band container in design mode */}
      <div className="band-children">
        {children}
      </div>
    </div>
  );
}

export default BandElement;