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

type GridHeaderGroupCellDefaultRendererProps = {
    columnId: string
    tabIndex: number
}

const GridHeaderGroupCellDefaultRendererImpl = ({
    columnId,
    tabIndex,
}: GridHeaderGroupCellDefaultRendererProps) => {
    const { column } = useColumnHeader(columnId)
    if (!column) {
        return <></>
    }

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