/* eslint-disable react-hooks/rules-of-hooks */
import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { Button } from "../Button"
import { FlexColumn } from "../FlexColumn"
import { Text } from "../Text"
import { CipherText } from "./CipherText"

type Story = StoryObj<typeof CipherText>

const meta: Meta<typeof CipherText> = {
  title: "Design System/CipherText",
  component: CipherText,
  render: ({ ...args }) => {
    return (
      <Text className="font-mono">
        <CipherText {...args} />
      </Text>
    )
  },
}

export default meta

export const Default: Story = {
  args: {
    children: "Hello World",
  },
}

export const Infinite: Story = {
  args: {
    infinite: true,
    children: "Hello World",
  },
}

export const WithPauseButton: Story = {
  args: {
    children: "Hello World",
  },
  render: ({ ...args }) => {
    const [paused, setPaused] = useState(false)

    return (
      <FlexColumn className="gap-2">
        <Button onClick={() => setPaused(isPaused => !isPaused)}>
          {paused ? "Play" : "Pause"}
        </Button>
        <Text className="font-mono">
          <CipherText paused={paused} {...args} />
        </Text>
      </FlexColumn>
    )
  },
}