import { faker } from "@faker-js/faker"
import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { Button } from "../Button"
import { Flex } from "../Flex"
import { AnimatedNumber, AnimatedNumberProps } from "./AnimatedNumber"

type Story = StoryObj<AnimatedNumberProps & { min?: number; max?: number }>

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

export default meta

const Template = (
  args: Partial<AnimatedNumberProps> & { min?: number; max?: number },
) => {
  const generateFakeNumber = () =>
    faker.number.float({
      max: args.max ?? 100,
      min: args.min ?? 0,
      fractionDigits: 4,
    })

  const [value, setValue] = useState(
    args.value !== undefined ? args.value : generateFakeNumber(),
  )

  return (
    <>
      <Flex className="gap-4">
        <Button
          onClick={() => {
            setValue(generateFakeNumber())
          }}
        >
          Change Value
        </Button>
      </Flex>
      <AnimatedNumber {...args} value={value} />
    </>
  )
}

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

export const WithPrefix: Story = {
  render: Template,
  args: {
    prefix: "💰",
  },
}

export const WithSuffix: Story = {
  render: Template,
  args: {
    suffix: "ETH",
  },
}

export const Null: Story = {
  render: Template,
  args: {
    value: null,
  },
}

export const LargeNumberDisplay: Story = {
  render: Template,
  args: {
    max: 1_000_000,
    min: 1_000,
    value: 1234567890,
  },
}

export const CompactDisplay: Story = {
  render: Template,
  args: {
    display: "compact",
  },
}

export const StandardDisplay: Story = {
  render: Template,
  args: {
    display: "standard",
  },
}

export const QuantityDisplay: Story = {
  render: Template,
  args: {
    display: "quantity",
  },
}

export const PercentDisplay: Story = {
  render: Template,
  args: {
    display: "percent",
  },
}

export const CurrencyDisplay: Story = {
  render: Template,
  args: {
    display: "usd",
  },
}