import React from 'react'
import { createSelector } from '../state/utils'
import { useGridContext, useGridSelector } from '../context/grid-context'

export function useColumnIndex(columnId: string) {
    const grid = useGridContext()

    const selectColumnIndex = React.useMemo(
        () =>
            createSelector([grid.selectors.selectColumnIds], (columnIds) =>
                columnIds.indexOf(columnId)
            ),
        [columnId, grid]
    )

    const columnIndex = useGridSelector(selectColumnIndex)

    return columnIndex
}