import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Edit, Favorite, Flag } from "../../icons"
import { Tooltip } from "../Tooltip"
import { Button } from "./Button"

type Story = StoryObj<typeof Button>

const meta: Meta<typeof Button> = {
  title: "Design System/Button",
  component: Button,
  args: {
    children: "Click me",
    onClick: () => alert("Clicked!"),
  },
}

export default meta

export const Default: Story = {}

export const Small: Story = {
  args: {
    size: "sm",
  },
}

export const Large: Story = {
  args: {
    size: "lg",
  },
}

export const Secondary: Story = {
  args: {
    variant: "secondary",
  },
}

export const SecondaryTransparent: Story = {
  args: {
    variant: "secondary-transparent",
  },
}

export const Tertiary: Story = {
  args: {
    variant: "tertiary",
  },
}

export const Frosted: Story = {
  args: {
    variant: "frosted",
  },
}

export const Destructive: Story = {
  args: {
    variant: "destructive",
  },
}

export const Ghost: Story = {
  args: {
    variant: "ghost",
  },
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
}

export const WithIcon: Story = {
  args: {
    icon: Favorite,
  },
}

export const WithCustomIcon: Story = {
  args: {
    icon: <span>👋</span>,
  },
}

export const WithRightIcon: Story = {
  args: {
    icon: Favorite,
    iconSide: "right",
  },
}

export const Loading: Story = {
  args: {
    isLoading: true,
  },
}

export const LoadingWithIcon: Story = {
  args: {
    children: null,
    icon: Edit,
    isLoading: true,
  },
}

export const DestructiveWithIcon: Story = {
  args: {
    variant: "destructive",
    icon: Flag,
  },
}

export const DestructiveLoading: Story = {
  args: {
    variant: "destructive",
    isLoading: true,
  },
}

export const WithLink: Story = {
  args: {
    href: "https://www.opensea.io",
  },
}

export const WithLinkAndTooltip: Story = {
  render: function Render() {
    return (
      <Tooltip content="Tooltip text">
        <Button href="https://www.opensea.io">Click me</Button>
      </Tooltip>
    )
  },
}

export const WithLinkDisabled: Story = {
  args: {
    href: "https://www.opensea.io",
    disabled: true,
  },
}

export const OnlyIcon: Story = {
  args: {
    icon: Favorite,
    children: null,
  },
}

export const OnlyIconSmall: Story = {
  args: {
    icon: Favorite,
    children: null,
    size: "sm",
  },
}

export const OnlyIconSecondary: Story = {
  args: {
    icon: Favorite,
    variant: "secondary",
    children: null,
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Button {...meta.args} {...Default.args} />
        <Button {...meta.args} {...Small.args} />
        <Button {...meta.args} {...Secondary.args} />
        <Button {...meta.args} {...SecondaryTransparent.args} />
        <Button {...meta.args} {...Tertiary.args} />
        <Button {...meta.args} {...Frosted.args} />
        <Button {...meta.args} {...Destructive.args} />
        <Button {...meta.args} {...Disabled.args} />
        <Button {...meta.args} {...WithIcon.args} />
        <Button {...meta.args} {...WithCustomIcon.args} />
        <Button {...meta.args} {...WithRightIcon.args} />
        <Button {...meta.args} {...Loading.args} />
        <Button {...meta.args} {...DestructiveWithIcon.args} />
        <Button {...meta.args} {...DestructiveLoading.args} />
        <Button {...meta.args} {...WithLink.args} />
        <Button {...meta.args} {...WithLinkDisabled.args} />
        <Button {...meta.args} {...OnlyIcon.args} />
        <Button {...meta.args} {...OnlyIconSmall.args} />
        <Button {...meta.args} {...OnlyIconSecondary.args} />
      </TestGridContainer>
    )
  },
}