import { Tooltip } from '@planview/pv-uikit'
import { overflow, spacingPx, sizePx, text } from '@planview/pv-utilities'
import React from 'react'
import styled from 'styled-components'

const CCell = styled.div`
    ${text.title};
    font-weight: normal;
    height: 100%;
    min-height: ${sizePx.small};
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 ${spacingPx.small};
    box-sizing: border-box;
`

const Ellipsed = styled.div`
    ${overflow.ellipsis};
`

export type GridHeaderGroupCellDefault = {
    /**
     * Id of the column
     */
    columnId: string
    /**
     * Text content of the header cell
     */
    label: string
    /**
     * Accessible tab index. You should generally pass through the tabIndex
     * provided to the Renderer component.
     */
    tabIndex: number
}

/**
 * This is the default header cell renderer for the pv-table.
 */
const GridHeaderGroupCellDefaultImpl = ({
    label,
    tabIndex,
}: GridHeaderGroupCellDefault) => (
    <CCell tabIndex={tabIndex}>
        <Tooltip unwrapped text={label} show="ellipsed">
            <Ellipsed>{label}</Ellipsed>
        </Tooltip>
    </CCell>
)

export const GridHeaderGroupCellDefault = React.memo(
    GridHeaderGroupCellDefaultImpl
) as typeof GridHeaderGroupCellDefaultImpl