import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import ButtonItem from './ButtonItem';
import messages from '../messages';

const ButtonList = ({
  buttons,
  onEdit,
  onDelete,
  onReorder,
  onAddPrimary,
  onAddSecondary,
  showAddPrimary,
  showAddSecondary,
  disabled,
  disableSecondaryButton,
  isInlineFormVisible,
  inlineFormIndex,
  renderInlineForm,
}) => {
  const [draggedIndex, setDraggedIndex] = useState(null);

  const handleDragStart = (index) => {
    if (disabled) return;
    setDraggedIndex(index);
  };

  const handleDragOver = (index) => {
    if (disabled) return;
    if (draggedIndex === null || draggedIndex === index) return;
    
    // Reorder buttons
    onReorder(draggedIndex, index);
    setDraggedIndex(index);
  };

  const handleDrop = () => {
    if (disabled) return;
  };

  const handleDragEnd = () => {
    if (disabled) return;
    setDraggedIndex(null);
  };

  const shouldRenderInlineForm = isInlineFormVisible
    && typeof inlineFormIndex === 'number'
    && inlineFormIndex >= 0;

  // Don't render the container if there are no buttons
  if (buttons.length === 0) {
    return null;
  }

  return (
    <div className="webpush-button-list">
      {buttons.map((button, index) => {
        if (shouldRenderInlineForm && inlineFormIndex === index && typeof renderInlineForm === 'function') {
          return (
            <div key={`button-inline-form-${button.id}`} className="button-inline-form">
              {renderInlineForm()}
            </div>
          );
        }
        // Only disable items that are not being edited
        const isItemDisabled = disabled || (isInlineFormVisible && inlineFormIndex !== null && inlineFormIndex !== index);
        return (
          <ButtonItem
            key={button.id}
            button={button}
            index={index}
            onEdit={onEdit}
            onDelete={onDelete}
            onDragStart={handleDragStart}
            onDragOver={handleDragOver}
            onDrop={handleDrop}
            onDragEnd={handleDragEnd}
            disabled={isItemDisabled}
          />
        );
      })}
      {showAddPrimary && (
        <CapRow className="button-list-add-button">
          <CapButton
            type="flat"
            onClick={onAddPrimary}
            className="add-primary-button button-add-trigger"
            icon="plus"
            disabled={disabled}
          >
            <FormattedMessage {...messages.addPrimaryButton} />
          </CapButton>
        </CapRow>
      )}
      {showAddSecondary && (
        <CapRow className="button-list-add-button">
          <CapButton
            type="flat"
            onClick={onAddSecondary}
            className="add-secondary-button button-add-trigger"
            icon="plus"
            disabled={disableSecondaryButton || disabled}
          >
            <FormattedMessage {...messages.addSecondaryButton} />
          </CapButton>
        </CapRow>
      )}
    </div>
  );
};

ButtonList.propTypes = {
  buttons: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
  })).isRequired,
  onEdit: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onReorder: PropTypes.func.isRequired,
  onAddPrimary: PropTypes.func.isRequired,
  onAddSecondary: PropTypes.func.isRequired,
  showAddPrimary: PropTypes.bool.isRequired,
  showAddSecondary: PropTypes.bool.isRequired,
  disabled: PropTypes.bool,
  disableSecondaryButton: PropTypes.bool,
  isInlineFormVisible: PropTypes.bool,
  inlineFormIndex: PropTypes.number,
  renderInlineForm: PropTypes.func,
};

ButtonList.defaultProps = {
  disabled: false,
  disableSecondaryButton: false,
  isInlineFormVisible: false,
  inlineFormIndex: null,
  renderInlineForm: null,
};

export default ButtonList;

