import React from 'react'
import { Chip } from '@planview/pv-uikit'
import type { ChipProps } from '@planview/pv-uikit'
import { sizePx, spacingPx } from '@planview/pv-utilities'
import styled from 'styled-components'

const ChipWrapper = styled.div`
    flex: 0 0 auto;
`

const ChipsCellBase = styled.div`
    min-width: 0;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: ${spacingPx.xsmall};
    padding: 0 ${spacingPx.small};
    overflow: hidden;

    /* Focus handled by grid */
    &:focus {
        outline: none;
    }

    &::after {
        content: '';
        display: block;
        width: ${sizePx.small};
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        mask-image: linear-gradient(-90deg, rgb(0 0 0 / 100%), transparent);
        background-color: var(--grid-row-background-color);
        z-index: 10;
    }
`

type Prettify<T> = {
    [K in keyof T]: T[K]
} & NonNullable<unknown>

export type GridCellChipsItem = Prettify<
    Omit<
        Extract<ChipProps, { focusable?: false }>,
        | 'disabled'
        | 'removeButtonLabel'
        | 'onRemove'
        | 'removeChipInstructions'
        | 'focusable'
    >
>

export type GridCellChipsProps = {
    tabIndex: number
    value?: GridCellChipsItem[] | string[]
}

const GridCellChipsImpl = React.forwardRef<HTMLDivElement, GridCellChipsProps>(
    function GridCellChips({ tabIndex, value, ...rest }, ref) {
        /* The ...rest spread below is to support current Popover that expects mouse events to be spread */
        return (
            <ChipsCellBase ref={ref} tabIndex={tabIndex} {...rest}>
                {value?.map((tag, i) =>
                    typeof tag === 'string' ? (
                        <ChipWrapper key={i}>
                            <Chip label={tag} disabled focusable={false} />
                        </ChipWrapper>
                    ) : (
                        <ChipWrapper key={tag.id ?? i}>
                            <Chip {...tag} disabled focusable={false} />
                        </ChipWrapper>
                    )
                )}
            </ChipsCellBase>
        )
    }
)
/**
 *
 * `import { GridCellChips } from '@planview/pv-grid'`
 *
 * The [GridCellChips](https://design.planview.com/components/grid/grid-renderer-chips) specifically designed to show multiple Chip
 * components in a cell. This cell renderer should be paired with the GridEditorComboboxMulti when editing is needed.
 *
 * ### Usage
 * The `value` can be an array of strings or objects that adhere to the exported `GridCellChipsItem` type which contains a subset of possible `Chip` props.
 * You can read more about these props on the [Chips component](https://planview-ds.github.io/react-pvds/?path=/docs/pv-uikit-chip--docs) documentation page.
 *
 * ```ts
 * type GridCellChipsItem = {
 *     id?: (string | number);
 *     label: string;
 *     icon?: React.JSX.Element;
 *     custom?: React.ReactNode;
 *     avatar?: (string | React.ReactElement<AvatarProps>);
 *     valid?: boolean;
 *     color?: string;
 *     role?: React.AriaRole;
 *     className?: string;
 * }
 * ```
 *
 * ### Responsiveness
 * The `GridCellChips` component will fade out the content if there is too much content for the width of the cell. You are
 * encouraged to use a Tooltip or Popover around the renderer to provide an expanded view of the content.
 *
 * ```tsx
 * const tagColumn: Column<Team> = {
 *      id: 'tags',
 *      label: 'Tags',
 *      cell: {
 *          Renderer({ value, tabIndex }) {
 *              return (
 *                  <GridCellChips
 *                      tabIndex={tabIndex}
 *                      value={value}
 *                  />
 *              )
 *          },
 *      },
 *  },
 * ```
 */
export const GridCellChips = React.memo(
    GridCellChipsImpl
) as typeof GridCellChipsImpl