import { observer } from 'mobx-react';
import { CSSProperties, css } from 'glamor';
import { dragSelect } from './dragSelect';
import React from 'react';
import { ApphouseComponent } from '../component.interfaces';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';

/**
 * Interface for the Droppable component styles
 */
export type DroppableStyles = CSSProperties;
/**
 * Interface for the Droppable component props
 */
export interface DroppableProps extends ApphouseComponent<DroppableStyles> {
  /**
   * The index of the droppable item
   */
  index: number;
  /**
   * The function to call when an item is dropped in this area
   * @param draggedItemIndex
   * @param droppedItemIndex
   */
  onDrop: (draggedItemIndex?: number, droppedItemIndex?: number) => void;
  /**
   * The children of the droppable
   */
  children?: React.ReactNode;
}

/**
 * A component that creates a drop area.
 * This component comes without any styles, you can set your own styles by passing
 * a style object to the styleOverwrites prop
 */
export const Droppable = observer((props: DroppableProps) => {
  const { index, onDrop, children, styleOverwrites, gutters } = props;
  const over = dragSelect.dropAtIndex === index;
  const localStyles = useLocalStyles<DroppableStyles>(
    {
      transition: 'all 0.25s ease-in'
    },
    styleOverwrites,
    gutters
  );
  return (
    <div
      {...css(localStyles)}
      data-style="container"
      onDragOver={() => {
        if (!over) {
          dragSelect.setDropAtIndex(index);
        }
      }}
      onDrop={() => {
        onDrop(dragSelect?.draggingItemListIndex, dragSelect?.dropAtIndex);
      }}
    >
      {children || null}
    </div>
  );
});