import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { MOONBIRDS_ITEM, OPENSEA_LOGO } from "../../constants/story"
import {
  ArbitrumLogo,
  ArbitrumNovaLogo,
  ApeLogo,
  AvalancheLogo,
  BaseLogo,
  BinanceLogo,
  BitcoinLogo,
  BlastLogo,
  EthereumLogo,
  FlowLogo,
  KlaytnLogo,
  OptimismLogo,
  PolygonLogo,
  SolanaLogo,
  Visibility,
  ZoraLogo,
} from "../../icons"
import { classNames } from "../../utils"
import { Button } from "../Button"
import { Flex } from "../Flex"
import { FlexColumn } from "../FlexColumn"
import { Avatar } from "./Avatar"

type Story = StoryObj<typeof Avatar>

const meta: Meta<typeof Avatar> = {
  title: "Design System/Avatar",
  component: Avatar,
}

export default meta

export const Image: Story = {
  args: {
    src: OPENSEA_LOGO,
  },
}

export const Video: Story = {
  args: {
    src: "https://i2.dev.seadn.io/base/0x0852af8836a0fbf8dc7a3556b3dd46109d29d0fb/c9772c851000be4491ddfa6c5c91cfa1.mp4",
  },
}

export const Icon: Story = {
  args: {
    icon: Visibility,
  },
}

export const Identicon: Story = {
  render: function Render() {
    const [seed, setSeed] = useState(new Date().getTime().toString())
    return (
      <Flex className="items-center gap-5">
        <Avatar rounded seed={seed} size={40} />
        <Button size="sm" onClick={() => setSeed(Math.random().toString())}>
          Change Seed
        </Button>
      </Flex>
    )
  },
}

export const Rounded: Story = {
  args: {
    src: "https://lh3.googleusercontent.com/G6ywpOqC1HDpKEKA7jMU5ScfBC3Pak1mRI91N6x9-UO6lXpR1SbFOdwG4kEGwu10pNcfgil0pSDIyCJfWHi_LARlFhCrlF39w6EL",
    size: 40,
    rounded: true,
  },
}

export const ObjectFit: Story = {
  args: {
    src: "https://lh3.googleusercontent.com/G6ywpOqC1HDpKEKA7jMU5ScfBC3Pak1mRI91N6x9-UO6lXpR1SbFOdwG4kEGwu10pNcfgil0pSDIyCJfWHi_LARlFhCrlF39w6EL",
    size: 40,
    objectFit: "cover",
  },
}

export const CustomRenderImage: Story = {
  render: function Render() {
    return (
      <Avatar
        renderImage={props => {
          // Make the size 4x as big
          return (
            <img
              {...props}
              style={{
                width: `${(props.size ?? 0) * 4}px`,
                height: `${(props.size ?? 0) * 4}px`,
              }}
            />
          )
        }}
        rounded
        size={40}
        src="https://lh3.googleusercontent.com/G6ywpOqC1HDpKEKA7jMU5ScfBC3Pak1mRI91N6x9-UO6lXpR1SbFOdwG4kEGwu10pNcfgil0pSDIyCJfWHi_LARlFhCrlF39w6EL"
      />
    )
  },
}

export const CustomRenderImageWithBadge: Story = {
  render: function Render() {
    return (
      <Avatar
        badge={
          <Avatar.Badge className="p-1" tintSrc={MOONBIRDS_ITEM}>
            <Avatar className="text-white" icon={BaseLogo} />
          </Avatar.Badge>
        }
        border
        className="rounded"
        renderImage={props => {
          // Make the size 2x as big
          return (
            <img
              {...props}
              className={classNames(props.className, "rotate-180")}
            />
          )
        }}
        size={40}
        src="https://lh3.googleusercontent.com/G6ywpOqC1HDpKEKA7jMU5ScfBC3Pak1mRI91N6x9-UO6lXpR1SbFOdwG4kEGwu10pNcfgil0pSDIyCJfWHi_LARlFhCrlF39w6EL"
      />
    )
  },
}

const badgeIcons = [
  ArbitrumLogo,
  ArbitrumNovaLogo,
  ApeLogo,
  AvalancheLogo,
  BaseLogo,
  BinanceLogo,
  BitcoinLogo,
  BlastLogo,
  EthereumLogo,
  FlowLogo,
  KlaytnLogo,
  OptimismLogo,
  PolygonLogo,
  SolanaLogo,
  ZoraLogo,
]

export const WithBadge: Story = {
  render: function Render() {
    return (
      <FlexColumn className="gap-3">
        {badgeIcons.map((BadgeIcon, i) => (
          <Avatar
            badge={
              <Avatar.Badge tintSrc={MOONBIRDS_ITEM}>
                <Avatar
                  className="text-white"
                  icon={BadgeIcon}
                  overrides={{ Icon: { size: "100%" } }}
                />
              </Avatar.Badge>
            }
            border
            className="rounded"
            key={i.toString()}
            size={48}
            src={MOONBIRDS_ITEM}
          />
        ))}
      </FlexColumn>
    )
  },
}

export const WithSmallBadge: Story = {
  render: function Render() {
    return (
      <FlexColumn className="gap-3">
        {badgeIcons.map((BadgeIcon, i) => (
          <Avatar
            badge={
              <Avatar.Badge size="sm" tintSrc={MOONBIRDS_ITEM}>
                <Avatar
                  className="text-white"
                  icon={BadgeIcon}
                  overrides={{ Icon: { size: "100%" } }}
                />
              </Avatar.Badge>
            }
            border
            className="rounded"
            key={i.toString()}
            size={48}
            src={MOONBIRDS_ITEM}
          />
        ))}
      </FlexColumn>
    )
  },
}

export const WithExtraSmallBadge: Story = {
  render: function Render() {
    return (
      <FlexColumn className="gap-3">
        {badgeIcons.map((BadgeIcon, i) => (
          <Avatar
            badge={
              <Avatar.Badge size="xs" tintSrc={MOONBIRDS_ITEM}>
                <Avatar
                  className="text-white"
                  icon={BadgeIcon}
                  overrides={{ Icon: { size: "100%" } }}
                />
              </Avatar.Badge>
            }
            border
            className="rounded"
            key={i.toString()}
            size={48}
            src={MOONBIRDS_ITEM}
          />
        ))}
      </FlexColumn>
    )
  },
}

export const NoImage: Story = {
  args: {
    src: undefined,
  },
}

export const NoImageLarge: Story = {
  args: {
    src: undefined,
    size: 400,
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Avatar {...Icon.args} />
        <Avatar {...Image.args} />
        <Avatar {...Video.args} />
        <Avatar {...Rounded.args} />
        <Avatar {...ObjectFit.args} />
        <Avatar
          renderImage={props => {
            // Make the size 4x as big
            return (
              <img
                {...props}
                style={{
                  width: `${(props.size ?? 0) * 4}px`,
                  height: `${(props.size ?? 0) * 4}px`,
                }}
              />
            )
          }}
          rounded
          size={40}
          src="https://lh3.googleusercontent.com/G6ywpOqC1HDpKEKA7jMU5ScfBC3Pak1mRI91N6x9-UO6lXpR1SbFOdwG4kEGwu10pNcfgil0pSDIyCJfWHi_LARlFhCrlF39w6EL"
        />
      </TestGridContainer>
    )
  },
}