import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import {
  MOONBIRDS_ITEM,
  OPENSEA_LOGO,
  PARALLEL_ITEM,
  SOLID,
  UNISWAP_ITEM,
} from "../../constants/story"
import { useCallbackRef } from "../../hooks"
import { Avatar } from "../Avatar"
import { Button } from "../Button"
import { FlexColumn } from "../FlexColumn"
import { MeshGradient, MeshGradientProps } from "./MeshGradient"

type Story = StoryObj<typeof MeshGradient>

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

export default meta

const Template = (args: MeshGradientProps) => {
  const IMAGES = [
    UNISWAP_ITEM,
    MOONBIRDS_ITEM,
    PARALLEL_ITEM,
    OPENSEA_LOGO,
    ...Object.values(SOLID),
  ]
  const [imageIndex, setImageIndex] = useState(0)
  return (
    <FlexColumn className="relative gap-6">
      <img className="size-10" src={IMAGES[imageIndex]} />
      <Button onClick={() => setImageIndex((imageIndex + 1) % IMAGES.length)}>
        New image
      </Button>
      <MeshGradient
        className="h-[400px] w-full"
        {...args}
        imageUrl={IMAGES[imageIndex]}
        key={IMAGES[imageIndex]}
      />
    </FlexColumn>
  )
}

export const Default: Story = {
  render: Template,
}

const IdenticonTemplate = () => {
  const [imageRef, setImageRef] = useCallbackRef<HTMLImageElement>()
  return (
    <FlexColumn className="relative gap-6">
      <Avatar
        ref={setImageRef}
        seed={"0xD7383C3c94a1E2F1224EC54b06dB9faE5352d375"}
      />
      <MeshGradient
        className="h-[400px] w-full"
        imageUrl={imageRef.current?.src}
      />
    </FlexColumn>
  )
}

export const Identicon: Story = {
  render: IdenticonTemplate,
}