import React from 'react'
import { GridHeaderCellDefault } from '../components/header-cell-default'
import { useColumnHeader } from '../hooks/'

type GridHeaderCellDefaultRendererProps = {
    columnId: string
    tabIndex: number
}

const GridHeaderCellDefaultRendererImpl = ({
    columnId,
    tabIndex,
}: GridHeaderCellDefaultRendererProps) => {
    const { column, sort, sortNumber } = useColumnHeader(columnId)

    if (!column) {
        return <></>
    }

    return (
        <GridHeaderCellDefault
            columnId={columnId}
            tabIndex={tabIndex}
            align={column.header?.align}
            label={column.label}
            sortable={column.sortable}
            sortDirection={sort?.direction}
            sortNumber={sortNumber}
        />
    )
}
/**
 * This default renderer takes only `columnId` and `tabIndex` and
 * retrieves the rest of its content from Grid context hooks.
 *
 * It ultimately renders the `GridHeaderCellDefault` component.
 *
 * If it fails to find data associated with a given column id,
 * it will return an empty React fragment.
 */
export const GridHeaderCellDefaultRenderer = React.memo(
    GridHeaderCellDefaultRendererImpl
) as typeof GridHeaderCellDefaultRendererImpl