import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { MOONBIRDS_ITEM, PARALLEL_ITEM, SOLID } from "../../constants/story"
import { useToggle } from "../../hooks"
import { Button } from "../Button"
import { CenterAligned } from "../CenterAligned"
import { FlexColumn } from "../FlexColumn"
import { ImageStack, ImageStackProps } from "./ImageStack"

type Story = StoryObj<typeof ImageStack>

const meta: Meta<typeof ImageStack> = {
  title: "Design System/ImageStack",
  component: ImageStack,
  args: {
    srcs: [MOONBIRDS_ITEM, PARALLEL_ITEM, SOLID.GREEN],
    size: 300,
  },
}

export default meta

export const Default: Story = {}

const AnimateInArgs: Partial<ImageStackProps> = {
  animate: "fade-in",
}

const PartialArgs: ImageStackProps = {
  srcs: [MOONBIRDS_ITEM, PARALLEL_ITEM],
}

export const Partial: Story = {
  args: PartialArgs,
  render: args => (
    // Adding a container to show that it's still centerabler even with partial items
    <CenterAligned className="size-1/2 rounded-lg bg-bg-additional-1 py-12">
      <ImageStack {...args} />
    </CenterAligned>
  ),
}

export const AnimateIn: Story = {
  args: {
    ...AnimateInArgs,
  },
}

export const PartialAnimateIn: Story = {
  args: {
    ...PartialArgs,
    ...AnimateInArgs,
  },
}

const ToggleTemplate = (args: ImageStackProps) => {
  const [show, toggleShow] = useToggle()

  return (
    <FlexColumn className="gap-6">
      <ImageStack {...args} show={show} />
      <Button onClick={() => toggleShow()}>
        show = {show ? "true" : "false"}
      </Button>
    </FlexColumn>
  )
}

export const Toggle: Story = {
  render: ToggleTemplate,
}

export const WithDelay: Story = {
  render: ToggleTemplate,
  args: {
    overrides: {
      animation: {
        base: {
          className: "delay-0",
        },
        position: {
          left: {
            className: "delay-400",
          },
          right: {
            className: "delay-200",
          },
        },
      },
    },
  },
}

export const Small: Story = {
  args: {
    size: 32,
  },
}