import React from 'react'
import { useGridContext, useGridSelector } from '../../context/grid-context'
import { GridDragBoxIndicator } from './box-indicator'
import { GridDragLineIndicator } from './line-indicator'
import { GridDragDroppedIndicator } from './dropped-indicator'

export type GridDragIndicatorProps = {
    width: number
}

export const GridDragIndicator: React.FC<GridDragIndicatorProps> = ({
    width,
}) => {
    const grid = useGridContext()

    const draggingActive = useGridSelector(grid.selectors.selectDragIsActive)
    const draggingMoveReceived = useGridSelector(
        grid.selectors.selectDragMoveReceived
    )

    const recentlyDroppedIds = useGridSelector(
        grid.selectors.selectRecentlyDroppedRowIds
    )
    const dragCollisionDetails = useGridSelector(
        grid.selectors.selectDragCollisionDetails
    )

    if (!draggingActive && recentlyDroppedIds.size) {
        return (
            <GridDragDroppedIndicator width={width} ids={recentlyDroppedIds} />
        )
    }

    if (!draggingActive || !draggingMoveReceived) {
        return null
    }

    const { prevId, level, parentId, operation } = dragCollisionDetails

    if (operation === 'over') {
        return <GridDragBoxIndicator width={width} overId={parentId} />
    }

    return <GridDragLineIndicator width={width} prevId={prevId} level={level} />
}