import { useGridContext, useGridSelector } from '../context/grid-context'
import type { GridFocusArea } from '../state'

export const NO_BORDERS = { left: false, right: false }

export const useColumnBorders = (
    columnId: string | [string, string],
    area: GridFocusArea
) => {
    const grid = useGridContext()

    const [leftColumnId, rightColumnId] = Array.isArray(columnId)
        ? columnId
        : [columnId, columnId]

    const showLeftBorder = useGridSelector((state) => {
        const borders = grid.selectors.selectBorderLayout(state)
        return (borders.get(leftColumnId)?.[area] ?? NO_BORDERS).left
    })

    const showRightBorder = useGridSelector((state) => {
        const borders = grid.selectors.selectBorderLayout(state)
        return (borders.get(rightColumnId)?.[area] ?? NO_BORDERS).right
    })
    return { showLeftBorder, showRightBorder }
}