import { Meta, StoryObj } from "@storybook/react"
import { list } from "radash"
import React, { useState } from "react"
import { Button } from "../Button"
import { CenterAligned } from "../CenterAligned"
import { Flex } from "../Flex"
import { FlexColumn } from "../FlexColumn"
import { AnimateHeight, AnimateHeightProps } from "./AnimateHeight"

type Story = StoryObj<typeof AnimateHeight>

const meta: Meta<typeof AnimateHeight> = {
  title: "Design System/AnimateHeight",
  component: AnimateHeight,
  args: {
    className: "bg-blue-3",
  },
}

export default meta

const Template = (args: AnimateHeightProps) => {
  const [childHeight, setChildHeight] = useState(200)
  const [childWidth, setChildWidth] = useState(200)
  return (
    <>
      <Flex className="gap-4">
        <Button
          onClick={() => {
            setChildHeight(childHeight - 50)
          }}
        >
          Decrease Height
        </Button>
        <Button
          onClick={() => {
            setChildHeight(childHeight + 50)
          }}
        >
          Increase Height
        </Button>

        <Button
          onClick={() => {
            setChildHeight(childHeight - 50)
            setChildWidth(childWidth - 50)
          }}
        >
          Decrease width and height
        </Button>

        <Button
          onClick={() => {
            setChildHeight(childHeight + 50)
            setChildWidth(childWidth + 50)
          }}
        >
          Increase width and height
        </Button>
      </Flex>
      <CenterAligned className="h-screen w-screen">
        <AnimateHeight {...args}>
          <div
            style={{
              height: childHeight,
              width: childWidth,
            }}
          />
        </AnimateHeight>
      </CenterAligned>
    </>
  )
}

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

export const FullWidth: Story = {
  render: function Render() {
    const [contentLines, setContentLines] = useState(1)
    return (
      <>
        <Flex className="gap-3">
          <Button
            className="mb-3"
            onClick={() => setContentLines(contentLines + 1)}
          >
            Add line
          </Button>

          <Button
            className="mb-3"
            onClick={() => setContentLines(contentLines - 1)}
          >
            Remove line
          </Button>
        </Flex>

        <AnimateHeight className="bg-blue-3">
          <FlexColumn className="gap-3 text-white">
            {list(1, contentLines).map((_, index) => (
              <div key={index}>Line {index + 1}</div>
            ))}
          </FlexColumn>
        </AnimateHeight>
      </>
    )
  },
}