import {
  DefaultItemProps,
  Item as DSItem,
  ItemAction,
  ItemContent,
  ItemDescription,
  ItemPropsBase,
  ItemSide,
  ItemTitle,
  ItemRenderLinkComponent,
  Url,
  AvatarElement,
} from "@opensea/ui-kit"
import React, { ElementRef, forwardRef } from "react"
import { AvatarImage, AvatarProps } from "../Avatar"
import { Link, LinkProps } from "../Link"

type LinkItemProps = ItemPropsBase & {
  href: Url
} & LinkProps

export type ItemProps = DefaultItemProps | LinkItemProps

const ItemAvatar = forwardRef<AvatarElement, AvatarProps>(
  function ItemAvatar(props, ref) {
    return <DSItem.Avatar ref={ref} {...props} renderImage={AvatarImage} />
  },
)

const NextItem = forwardRef<ElementRef<typeof DSItem>, ItemProps>(
  function NextItem(props, ref) {
    return (
      <DSItem
        renderLink={Link as ItemRenderLinkComponent}
        {...props}
        ref={ref}
      />
    )
  },
)

export const Item = Object.assign({}, NextItem, {
  Avatar: Object.assign(ItemAvatar, { Badge: DSItem.Avatar.Badge }),
  Content: ItemContent,
  Title: ItemTitle,
  Description: ItemDescription,
  Side: ItemSide,
  Action: ItemAction,
})