import React from 'react'
import { useGridContext, useGridSelector } from '../context/grid-context'
import type { Column } from '../types'

export type UseCellStickySizingParams = {
    virtualStart?: number
    actualWidth: number
    columnId: string
    column: Column<any>
}

export const useCellStickySizing = ({
    actualWidth,
    virtualStart,
    columnId,
    column,
}: UseCellStickySizingParams) => {
    const grid = useGridContext()

    const stickyOffset = useGridSelector((state) =>
        grid.selectors.selectColumnStickyOffset(state, columnId)
    )

    const sticky =
        column.sticky === 'left' || column.sticky === 'right'
            ? column.sticky
            : null

    const style: React.CSSProperties = React.useMemo(() => {
        if (sticky) {
            return {
                [sticky]: stickyOffset,
                width: actualWidth,
            }
        }
        return virtualStart !== undefined
            ? {
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  transform: `translateX(${virtualStart}px)`,
                  width: actualWidth,
              }
            : { width: actualWidth }
    }, [actualWidth, virtualStart, sticky, stickyOffset])

    return { sticky, style }
}