/* eslint-disable react-hooks/rules-of-hooks */
import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { Container as DSContainer } from "../Container"
import { FlexColumn } from "../FlexColumn"
import { Text } from "../Text"
import { ToggleButtonGroup } from "../ToggleButtonGroup"
import { GradientMask, GradientMaskProps } from "./GradientMask"

type Story = StoryObj<typeof GradientMask>

function Template(props: GradientMaskProps) {
  return (
    <GradientMask {...props}>
      <DSContainer className="aspect-square size-full bg-blue-1">
        <Text.Heading size="md">Hello world</Text.Heading>
      </DSContainer>
    </GradientMask>
  )
}

const meta: Meta<typeof GradientMask> = {
  title: "Design System/GradientMask",
  component: GradientMask,
  render: Template,
  args: {
    className: "w-[200px] h-[200px] bg-blue-3",
  },
}

export default meta

export const Container: Story = {
  args: {
    variant: "container",
  },
}

export const LeftContainer: Story = {
  args: {
    variant: "container",
    side: "left",
  },
}

export const RightContainer: Story = {
  args: {
    variant: "container",
    side: "right",
  },
}

export const AnimatedContainer: Story = {
  render: (args: GradientMaskProps) => {
    const [side, setSides] = useState<GradientMaskProps["side"]>("both")

    return (
      <FlexColumn className="w-[300px] gap-4">
        <Template
          {...args}
          className="transition duration-300 ease-out-quint"
          side={side !== "both" ? side : undefined}
        />
        <ToggleButtonGroup
          value={side}
          onValueChange={value => setSides(value as GradientMaskProps["side"])}
        >
          <ToggleButtonGroup.Item value="none">None</ToggleButtonGroup.Item>
          <ToggleButtonGroup.Item value="left">Left</ToggleButtonGroup.Item>
          <ToggleButtonGroup.Item value="both">Both</ToggleButtonGroup.Item>
          <ToggleButtonGroup.Item value="right">Right</ToggleButtonGroup.Item>
        </ToggleButtonGroup>
      </FlexColumn>
    )
  },
  args: {
    variant: "container",
  },
}