import React from 'react'
import styled from 'styled-components'
import { useGridContext, useGridSelector } from '../context/grid-context'

const CollisionOverlay = styled.div`
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
`

const BetweenHit = styled.div`
    display: block;
    position: absolute;
    right: 0;
    background: rgba(170 51 106 / 20%);
    border: solid 0.5px rgba(170 51 106 / 20%);
    font-size: 8px;
    text-align: right;
`

const OverHit = styled.div`
    display: block;
    position: absolute;
    right: 0;
    background: rgba(51 170 106 / 20%);
    border: solid 0.5px rgba(51 170 106 / 20%);
    font-size: 8px;
    text-align: right;
`

export const DragCollisionPreview = () => {
    const grid = useGridContext()

    const data = useGridSelector(grid.selectors.selectCollisionAreas)

    return (
        <CollisionOverlay>
            {data.collisions.map((col, i) => {
                const Comp = col.operation === 'between' ? BetweenHit : OverHit

                const { top, bottom, left } = col

                return (
                    <Comp
                        key={i}
                        style={{
                            top,
                            height: bottom - top,
                            left,
                            right: 0,
                        }}
                    >
                        Parent: {col.parentId ?? '-'} Prev:{' '}
                        {col.prevInsertId ?? '-'}
                    </Comp>
                )
            })}
        </CollisionOverlay>
    )
}