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

const CCell = styled.div<{ $rightAlign: boolean }>`
    ${text.semibold};
    height: 100%;
    min-height: ${sizePx.small};
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    padding: 0 ${spacingPx.small};
    ${(props) =>
        props.$rightAlign &&
        css`
            justify-content: flex-end;
        `}
`

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

export type GridFooterCellDefault = {
    /**
     * Id of the column
     */
    columnId: string
    /**
     * Does the column contain left aligned cells
     * or right aligned cells
     */
    align?: 'left' | 'right'
    /**
     * Text content of the footer cell
     */
    label: string | number
}

/**
 * This is the default header cell renderer for the pv-table.
 */
const GridFooterCellDefaultImpl = ({ align, label }: GridFooterCellDefault) => (
    <CCell $rightAlign={align === 'right'}>
        <Tooltip unwrapped text={label} show="ellipsed">
            <Ellipsed>{label}</Ellipsed>
        </Tooltip>
    </CCell>
)

export const GridFooterCellDefault = React.memo(
    GridFooterCellDefaultImpl
) as typeof GridFooterCellDefaultImpl