// ItemList.tsx
import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { Slider } from "../../client"
import {
  SOLID,
  MOONBIRDS_ITEM,
  OPENSEA_LOGO,
  PARALLEL_ITEM,
  UNISWAP_ITEM,
} from "../../constants/story"
import {
  Button,
  CenterAligned,
  Flex,
  FlexCenter,
  FlexColumn,
  Text,
} from "../../server"
import { useProminentColors } from "../useProminentColors"
import { useGradientFromColor } from "./useGradientFromColor"

const meta: Meta<typeof FlexColumn> = {
  title: "Hooks/useGradientFromColor",
}

export default meta

type Story = StoryObj<typeof FlexColumn>

const Template = () => {
  const IMAGES = [
    UNISWAP_ITEM,
    MOONBIRDS_ITEM,
    PARALLEL_ITEM,
    OPENSEA_LOGO,
    ...Object.values(SOLID),
  ]
  const [imageIndex, setImageIndex] = useState(0)

  const [range, setRange] = useState(0.02)
  const [darkness, setDarkness] = useState(0.99)

  const { prominentColors } = useProminentColors(IMAGES[imageIndex], {
    excludeBlackAndWhite: false,
  })

  const gradientSteps = useGradientFromColor(prominentColors[0], {
    range,
    darkness,
  })

  return (
    <FlexColumn className="relative gap-6 ">
      <Flex>
        <img className="size-64" src={IMAGES[imageIndex]} />

        <Flex
          className="size-64"
          style={{
            background: `linear-gradient(to bottom, ${gradientSteps?.join(", ")})`,
          }}
        />
      </Flex>

      <FlexCenter>
        <CenterAligned className="w-32">
          <Text.Label className="text-center">Range</Text.Label>
        </CenterAligned>
        <Slider
          max={1}
          min={0}
          step={0.01}
          value={range}
          onValueChange={setRange}
        />
      </FlexCenter>

      <FlexCenter>
        <CenterAligned className="w-32">
          <Text.Label className="text-center">Darkness</Text.Label>
        </CenterAligned>
        <Slider
          max={1}
          min={0}
          step={0.01}
          value={darkness}
          onValueChange={setDarkness}
        />
      </FlexCenter>

      <Button onClick={() => setImageIndex((imageIndex + 1) % IMAGES.length)}>
        New image
      </Button>
    </FlexColumn>
  )
}

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