import { faker } from "@faker-js/faker"
import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { numberFormatter } from "../../utils"
import { Button } from "../Button"
import { Flex } from "../Flex"
import { ChangeAnimation, type ChangeAnimationProps } from "./ChangeAnimation"

type Story = StoryObj<typeof ChangeAnimation>

const meta: Meta<typeof ChangeAnimation> = {
  title: "Design System/ChangeAnimation",
  component: ChangeAnimation,
  args: {
    onChangeAnimationClassName: "animate-change-animation-bg",
    onPositiveChangeAnimationClassName: "animate-positive-change-bg",
    onNegativeChangeAnimationClassName: "animate-negative-change-bg",
    display: "compact",
  },
}

export default meta

const generateFakeNumber = () =>
  faker.number.float({ max: 100, fractionDigits: 4 })

const format = numberFormatter("en-US")

const Template = (args: Omit<ChangeAnimationProps, "value">) => {
  const [value, setValue] = useState(generateFakeNumber())
  const formatted = format(value, { display: args.display })

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

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

const MinorChange = (args: Omit<ChangeAnimationProps, "value">) => {
  const [value, setValue] = useState(10.924)
  const formatted = format(value, { display: args.display })

  return (
    <>
      <Flex className="gap-4">
        <Button
          onClick={() => {
            setValue(value + 0.001)
          }}
        >
          Change Value by 0.001
        </Button>
      </Flex>
      <Flex className="p-4">Raw Value: {value}</Flex>
      <ChangeAnimation {...args} value={value}>
        <Flex className="p-4">{formatted}</Flex>
      </ChangeAnimation>
    </>
  )
}

export const minorChange: Story = {
  render: MinorChange,
}