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

const CCell = styled.div`
    ${text.regular};
    min-height: ${sizePx.small};
    height: 100%;
    width: 100%;
    padding: 0 ${spacingPx.small} 0 ${spacingPx.small};
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
`

const StyledLink = styled.a`
    ${overflow.ellipsis};
    ${cursor.pointer};
    color: ${theme.textLinkNormal};
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        text-decoration-color: ${theme.textLinkHover};
        color: ${theme.textLinkHover};
    }

    &:focus {
        outline: none;
        text-decoration: underline;
        text-decoration-color: ${theme.textLinkHover};
        color: ${theme.textLinkHover};
    }
`

export type GridCellLinkProps = {
    /**
     * Accessible tab index. You should generally pass through the tabIndex
     * provided to the Renderer component.
     */
    tabIndex: number
    /**
     * Display value
     */
    label: string
} & Omit<
    React.AllHTMLAttributes<HTMLAnchorElement>,
    'tabIndex' | 'children' | 'as'
>

const GridCellLinkImpl = ({
    label,
    tabIndex = 0,
    ...rest
}: GridCellLinkProps) => (
    <CCell>
        <Tooltip unwrapped text={label} show="ellipsed">
            <StyledLink
                {...rest}
                tabIndex={tabIndex}
                onClick={(e) => {
                    /* Prevent the grid from selecting the row */
                    e.stopPropagation()
                    rest.onClick?.(e)
                }}
            >
                {label}
            </StyledLink>
        </Tooltip>
    </CCell>
)
/**
 *
 * `import { GridCellLink } from '@planview/pv-grid'`
 * 
 * **Deprecated**: Use `GridCellDefault` instead and pass the `href` prop.
 * 
 * Cell to render a link
 *
 * Can receive any attribute of the anchor element apart from the label and tabIndex which are mandatory
 *
 * ### Responsiveness
 * The`GridCellLink` will apply a tooltip whenever the text is truncated
 *
 *
 *
 * ```tsx
 * const linkColumn: Column<Entry> = {
 *      id: "link",
 *      cell: {

 *          Renderer: ({ label, tabIndex }) => (
 *              <GridCellLink label={ label } tabIndex={tabIndex} href="http://someUrl.com" />
 *          )
 *      }
 * }
 * ```
 * 
 *  @deprecated Use `GridCellDefault` instead and pass the `href` prop.
 */
export const GridCellLink = React.memo(
    GridCellLinkImpl
) as typeof GridCellLinkImpl