import React from 'react';
import PropTypes from 'prop-types';
import { Draggable } from 'react-beautiful-dnd';
import { Button } from '../../atoms/button/Button';
import { Icon } from '../../atoms/icon/Icon';
import { useFormListContext } from './FormList';

const propTypes = {
  /**
   * The content of the FormListItem.
   */
  children: PropTypes.node,

  /**
   * The className property allows you to add more classes to the component.
   */
  className: PropTypes.string,

  /**
   * Unique id is required for the draggable to work.
   */
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

  /**
   * The index of the FormListItem, used by the Draggable component.
   */
  index: PropTypes.number.isRequired,

  /**
   * Event handler called on the left action click.
   */
  onLeftAction: PropTypes.func,

  /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
  tag: PropTypes.elementType,

  /**
   * A node that overrides the default left action.
   */
  leftAction: PropTypes.node,

  /**
   * The name of the icon to use. Default: delete
   */
  leftActionIconName: PropTypes.string,
};

const defaultProps = {
  children: '',
  className: '',
  onLeftAction: undefined,
  tag: 'div',
  leftAction: undefined,
  leftActionIconName: 'delete',
};

export const FormListItem = ({
  children,
  className,
  id,
  index,
  onLeftAction,
  tag: Tag,
  leftAction,
  leftActionIconName,
}) => {
  const { isDraggable } = useFormListContext();

  const renderChildren = () => (
    <div className="sui-m-form-list__item-content">
      {children}
    </div>
  );

  const renderLeftAction = () => {
    if (leftAction && React.isValidElement(leftAction)) {
      return (
        <div className="sui-m-form-list__item-left-action">
          {leftAction}
        </div>
      );
    }

    if (onLeftAction) {
      return (
        <div className="sui-m-form-list__item-left-action">
          <Button isSquare onClick={onLeftAction}>
            <Icon name={leftActionIconName} size="sm" />
          </Button>
        </div>
      );
    }

    return null;
  };

  if (isDraggable) {
    return (
      <Draggable
        draggableId={`draggable-${id}`}
        index={index}
      >
        {(provided) => (
          <Tag
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={{
              ...provided.draggableProps.style,
            }}
            className={`sui-m-form-list__item ${className}`}
          >
            {renderLeftAction()}
            {renderChildren()}

            <div className="sui-m-form-list__item-drag">
              <Button tag="div" isSquare>
                <Icon name="fa-bars" size="sm" />
              </Button>
            </div>
          </Tag>
        )}
      </Draggable>
    );
  }

  return (
    <Tag className={`sui-m-form-list__item ${className}`}>
      {renderLeftAction()}
      {renderChildren()}
    </Tag>
  );
};

FormListItem.propTypes = propTypes;
FormListItem.defaultProps = defaultProps;
