import { Tooltip } from '@planview/pv-uikit'
import {
    theme,
    cursor,
    overflow,
    spacingPx,
    text,
} from '@planview/pv-utilities'
import React from 'react'
import styled, { css } from 'styled-components'
const disabledStyles = css`
    opacity: 0.5;
    ${cursor.notAllowed};
`

const CCell = styled.div<{
    $disabled: boolean
}>`
    ${text.numeric};
    color: ${theme.textPrimary};
    height: 100%;
    width: 100%;
    padding: 0 ${spacingPx.small};
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    ${(props) => (props.$disabled ? disabledStyles : '')};

    &:focus {
        outline: none;
    }
`

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

export type GridCellNumericProps = {
    /**
     * Accessible tab index. You should generally pass through the tabIndex
     * provided to the Renderer component.
     */
    tabIndex: number
    /**
     * Contents
     */
    label: string
    /**
     * Should this be disabled
     */
    disabled?: boolean
    /**
     * Background color to use. Should only use official colors in
     * the 0-200 range to be properly accessible with textPrimary.
     */
    backgroundColor?: string
}

const GridCellNumericImpl = ({
    tabIndex,
    label,
    disabled,
    backgroundColor,
}: GridCellNumericProps) => (
    <CCell
        $disabled={!!disabled}
        tabIndex={tabIndex}
        style={{ backgroundColor }}
    >
        <Tooltip unwrapped text={label} show="ellipsed">
            <Ellipsed>{label}</Ellipsed>
        </Tooltip>
    </CCell>
)
/**
 * **Deprecated**: Use `GridCellDefault` instead and apply `numeric` prop.
 *
 * This is a cell that renders content aligned to the right
 * with tabular (monospaced) numbers. Use this in combination
 * with a cell Renderer function to render numeric cells.
 *
 * ```tsx
 * const numberColumn: Column<Entry> = {
 *      id: "number",
 *      cell: {
 *          Renderer: ({ label, tabIndex }) => (
 *              <GridCellNumeric label={ label } tabIndex={tabIndex} />
 *          )
 *      }
 * }
 * ```
 *
 * @deprecated Use `GridCellDefault` instead and apply `numeric` prop.
 */
export const GridCellNumeric = React.memo(
    GridCellNumericImpl
) as typeof GridCellNumericImpl