import { cursor, 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.regular};
    height: 100%;
    width: 100%;
    padding: 0 ${spacingPx.small};
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    ${(props) => (props.$disabled ? disabledStyles : '')};

    &:focus {
        outline: none;
    }
`

export type GridCellBaseProps = {
    /**
     * Accessible tab index. You should generally pass through the tabIndex
     * provided to the Renderer component.
     */
    tabIndex: number
    /**
     * Contents
     */
    children: React.ReactNode
    /**
     * Should this be disabled
     */
    disabled?: boolean
} & Omit<
    React.ComponentPropsWithoutRef<'div'>,
    'disabled' | 'tabIndex' | 'children'
>

const GridCellBaseImpl = React.forwardRef<HTMLDivElement, GridCellBaseProps>(
    function GridCellBaseImpl({ tabIndex, children, disabled, ...rest }, ref) {
        return (
            <CCell
                ref={ref}
                $disabled={!!disabled}
                tabIndex={tabIndex}
                {...rest}
            >
                {children}
            </CCell>
        )
    }
)
/**
 * This is a minimal cell component that includes
 * default padding and text styles. Use this with a cell
 * Renderer function to render simple custom content.
 * More advanced cases will require you to render a fully
 * custom component.
 *
 *
 * ```tsx
 * const roleColumn: Column<User> = {
 *      id: "role",
 *      cell: {
 *          Renderer: ({ label, tabIndex }) => (
 *              <GridCellBase tabIndex={tabIndex}>
 *                  <Tag label={ label } />
 *              </GridCellBase>
 *          )
 *      }
 * }
 * ```
 */
export const GridCellBase = React.memo(
    GridCellBaseImpl
) as typeof GridCellBaseImpl