import React from 'react';
import PropTypes from 'prop-types';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';

const ButtonItem = ({
  button,
  index,
  onEdit,
  onDelete,
  onDragStart,
  onDragOver,
  onDrop,
  onDragEnd,
  disabled,
}) => {
  const handleDragStart = (e) => {
    if (disabled) return;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', e.currentTarget);
    onDragStart(index);
  };

  const handleDragOver = (e) => {
    if (disabled) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    onDragOver(index);
  };

  const handleDrop = (e) => {
    if (disabled) return;
    e.preventDefault();
    e.stopPropagation();
    onDrop(index);
  };

  return (
    <div 
      className={`webpush-button-item ${disabled ? 'disabled' : ''}`}
      draggable={!disabled}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      onDragEnd={onDragEnd}
    >
      <CapRow align="middle" className="button-item-content">
        <CapColumn span={1} className="button-item-drag-handle">
          <CapIcon type="drag" className="drag-icon" />
        </CapColumn>
        <CapColumn span={1} className="button-item-icon">
          <CapIcon type="link" className="link-icon" />
        </CapColumn>
        <CapColumn span={14} className="button-item-info">
          <div className="button-item-text-row">
            <span className="button-item-text">{button.text}</span>
          </div>
        </CapColumn>
        <CapColumn span={8} className="button-item-actions">
          <div className="button-item-url">{button.url}</div>
          <div className="action-icons">
            <CapIcon
              type="edit"
              className="action-icon"
              onClick={() => !disabled && onEdit(index)}
            />
            <CapIcon
              type="delete"
              className="action-icon delete-icon"
              onClick={() => !disabled && onDelete(index)}
            />
          </div>
        </CapColumn>
      </CapRow>
    </div>
  );
};

ButtonItem.propTypes = {
  button: PropTypes.shape({
    text: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
  }).isRequired,
  index: PropTypes.number.isRequired,
  onEdit: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onDragStart: PropTypes.func.isRequired,
  onDragOver: PropTypes.func.isRequired,
  onDrop: PropTypes.func.isRequired,
  onDragEnd: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
};

ButtonItem.defaultProps = {
  disabled: false,
};

export default ButtonItem;

