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

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};
`

const SortIconContainer = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: top;
    position: relative;
`
const SortNumber = styled.div`
    ${text.small};
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
    color: ${theme.textPrimary};
    position: absolute;
    text-align: center;
    width: ${sizePx.xsmall};
    right: 0;
    top: ${spacingPx.xsmall};
`

const SortWithNumber = ({
    direction,
    number,
}: {
    direction: 'asc' | 'desc'
    number?: number
}) => {
    const icon =
        direction === 'asc' ? (
            <ArrowDown color={theme.iconNormal} />
        ) : (
            <ArrowUp color={theme.iconNormal} />
        )

    return (
        <SortIconContainer>
            {icon}
            {number ? <SortNumber>{number}</SortNumber> : undefined}
        </SortIconContainer>
    )
}

export type GridHeaderCellDefault = {
    /**
     * Id of the column
     */
    columnId: string
    /**
     * Does the column contain left aligned cells
     * or right aligned cells
     */
    align?: 'left' | 'right'
    /**
     * 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
    /**
     * Does this column support sorting
     */
    sortable?: boolean
    /**
     * Is this column sorted and if so, which direction is it sorted.
     */
    sortDirection?: 'asc' | 'desc'
    /**
     * If this column is part of a multi-column sort, which position
     * is this column in the combination.
     */
    sortNumber?: number
}

/**
 * This is the default header cell renderer for the pv-table.
 */
const GridHeaderCellDefaultImpl = ({
    align,
    label,
    tabIndex,
    sortable,
    sortDirection,
    sortNumber,
}: GridHeaderCellDefault) => {
    const sortDetails =
        sortable && sortDirection ? (
            <SortWithNumber direction={sortDirection} number={sortNumber} />
        ) : null

    return (
        <CCell $rightAlign={align === 'right'} tabIndex={tabIndex}>
            {align === 'right' && sortDetails}
            <Tooltip unwrapped text={label} show="ellipsed">
                <Ellipsed>{label}</Ellipsed>
            </Tooltip>
            {align !== 'right' && sortDetails}
        </CCell>
    )
}

export const GridHeaderCellDefault = React.memo(
    GridHeaderCellDefaultImpl
) as typeof GridHeaderCellDefaultImpl