import type { Meta, StoryObj } from '@storybook/react';
import React, { useCallback, useState } from 'react';
import { expect, fireEvent, fn, within } from 'storybook/test';
import { twMerge } from 'tailwind-merge';

import * as IconComponents from '@/icons';
import {
  GiftIcon,
  LinkIcon,
  MusicIcon,
  PlayIcon,
  ShareArrowIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
  TrashIcon,
} from '@/icons';

import Button, { ButtonShape, ButtonSize, ButtonVariant } from './Button';

type PagePropsAndCustomArgs = Pick<
  React.ComponentProps<typeof Button>,
  | 'active'
  | 'disabled'
  | 'aspectSquare'
  | 'size'
  | 'shape'
  | 'variant'
  | 'href'
  | 'className'
  | 'children'
  | 'icon'
  | 'iconStart'
  | 'iconEnd'
  | 'contentClassName'
  | 'iconClassName'
  | 'onClick'
  | 'backgroundImage'
  | 'backgroundHoverAnimationSpeed'
> & {
  size?: string;
  onClick?: React.MouseEventHandler;
  test?: string;
};

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/Button',
  component: Button,
  argTypes: {
    active: {
      control: { type: 'boolean' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
    aspectSquare: {
      control: { type: 'boolean' },
    },
    href: {
      control: { type: 'text' },
    },
    className: {
      control: { type: 'text' },
    },
    contentClassName: {
      control: { type: 'text' },
    },
    iconClassName: {
      control: { type: 'text' },
    },
    children: {
      control: { type: 'text' },
    },
    icon: {
      control: { type: 'text' },
    },
    iconStart: {
      control: { type: 'text' },
    },
    iconEnd: {
      control: { type: 'text' },
    },
    test: {
      options: ['Default', 'Small'],
      mapping: {
        Default: 'default',
        Small: 'sm',
      },
    },
    size: {
      options: Object.keys(ButtonSize),
      mapping: ButtonSize,
    },
    shape: {
      options: Object.keys(ButtonShape),
      mapping: ButtonShape,
    },
    variant: {
      options: Object.keys(ButtonVariant),
      mapping: ButtonVariant,
    },
  },
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;
type StoryRenderer = NonNullable<Story['render']>;

const ButtonRow: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
  children,
  className,
  ...restProps
}) => (
  <div
    className={twMerge(
      'flex flex-wrap items-center justify-start gap-2',
      className
    )}
    {...restProps}
  >
    {children}
  </div>
);

function argsToProps(
  args: PagePropsAndCustomArgs
): React.ComponentProps<typeof Button> {
  const props = {
    ...args,
    icon:
      typeof args.icon === 'string'
        ? IconComponents[args.icon as keyof typeof IconComponents]
        : args.icon,
    iconStart:
      typeof args.iconStart === 'string'
        ? IconComponents[args.iconStart as keyof typeof IconComponents]
        : args.iconStart,
    iconEnd:
      typeof args.iconEnd === 'string'
        ? IconComponents[args.iconEnd as keyof typeof IconComponents]
        : args.iconEnd,
  };
  return props;
}

function render(args: PagePropsAndCustomArgs) {
  return <Button {...argsToProps(args)} />;
}

function renderWithArgsToProps(
  render: (
    args: ReturnType<typeof argsToProps>,
    context: Parameters<StoryRenderer>[1]
  ) => ReturnType<StoryRenderer>
): NonNullable<Story['render']> {
  return (args, context) => render(argsToProps(args), context);
}

export const Default: Story = {
  render: renderWithArgsToProps((props) => (
    <Button {...props} data-testid='data-testid' />
  )),
  args: {
    children: 'Button Label',
    onClick: fn(),
  },
  play: async ({ args, canvasElement, step }) => {
    const canvas = within(canvasElement);
    const el = canvas.getByTestId('data-testid');

    await step('display', async () => {
      if (typeof args.children === 'string') {
        await expect(el).toHaveTextContent(args.children as string);
      }
    });

    await step('interaction', async () => {
      await expect(args.onClick).not.toHaveBeenCalled();
      await fireEvent.click(el);
      await expect(args.onClick).toHaveBeenCalled();
    });
  },
};

export const StandardRounded: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Large}>
        Large
      </Button>
      <Button {...props} size={ButtonSize.Medium}>
        Medium
      </Button>
      <Button {...props} size={ButtonSize.Small}>
        Small
      </Button>
      <Button {...props} size={ButtonSize.Mini}>
        Mini
      </Button>
    </>
  )),
  args: {
    children: 'Standard Button',
    variant: ButtonVariant.Standard,
    size: ButtonSize.Large,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const StandardPill: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Large}>
        Large
      </Button>
      <Button {...props} size={ButtonSize.Medium}>
        Medium
      </Button>
      <Button {...props} size={ButtonSize.Small}>
        Small
      </Button>
      <Button {...props} size={ButtonSize.Mini}>
        Mini
      </Button>
    </>
  )),
  args: {
    children: 'Standard Button',
    variant: ButtonVariant.Standard,
    size: ButtonSize.Large,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

function StandardActiveInactiveDemo(
  props: React.ComponentProps<typeof Button>
) {
  const [active, setActive] = useState(true);
  const handleClick = useCallback(() => {
    setActive((prevActive) => !prevActive);
  }, []);
  return (
    <>
      <Button {...props} active={true}>
        Active
      </Button>
      <Button {...props} active={false}>
        Inactive
      </Button>
      <Button
        {...props}
        active={active}
        onClick={handleClick as any}
        iconStart={ThumbsUpIcon}
      >
        Toggle me
      </Button>
    </>
  );
}

export const StandardActiveInactive: Story = {
  render: (args) => <StandardActiveInactiveDemo {...argsToProps(args)} />,
  args: {
    variant: ButtonVariant.Standard,
    size: ButtonSize.Small,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const PrimaryRounded: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Large}>
        Large
      </Button>
      <Button {...props} size={ButtonSize.Medium}>
        Medium
      </Button>
      <Button {...props} size={ButtonSize.Small}>
        Small
      </Button>
      <Button {...props} size={ButtonSize.Mini}>
        Mini
      </Button>
    </>
  )),
  args: {
    children: 'Primary Button',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Large,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const PrimaryPill: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Medium}>
        Medium
      </Button>
      <Button {...props} size={ButtonSize.Small}>
        Small
      </Button>
      <Button {...props} size={ButtonSize.Mini} iconEnd={LinkIcon}>
        Mini
      </Button>
    </>
  )),
  args: {
    children: 'Primary Button',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Large,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

function PrimaryActiveInactiveDemo(props: React.ComponentProps<typeof Button>) {
  const [active, setActive] = useState(true);
  const handleClick = useCallback(() => {
    setActive((prevActive) => !prevActive);
  }, []);
  return (
    <>
      <Button {...props} active={true}>
        Active
      </Button>
      <Button {...props} active={false}>
        Inactive
      </Button>
      <Button
        {...props}
        active={active}
        onClick={handleClick as any}
        iconStart={ThumbsUpIcon}
      >
        Toggle me
      </Button>
    </>
  );
}

export const PrimaryActiveInactive: Story = {
  render: (args) => <PrimaryActiveInactiveDemo {...argsToProps(args)} />,
  args: {
    children: 'Primary Button',
    active: true,
    variant: ButtonVariant.Primary,
    size: ButtonSize.Small,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const SecondaryRounded: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Large}>
        Large
      </Button>
      <Button {...props} size={ButtonSize.Medium}>
        Medium
      </Button>
      <Button {...props} size={ButtonSize.Small}>
        Small
      </Button>
      <Button {...props} size={ButtonSize.Mini}>
        Mini
      </Button>
    </>
  )),
  args: {
    variant: ButtonVariant.Secondary,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const SecondaryPill: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Large}>
        Large
      </Button>
      <Button {...props} size={ButtonSize.Medium}>
        Medium
      </Button>
      <Button {...props} size={ButtonSize.Small}>
        Small
      </Button>
      <Button {...props} size={ButtonSize.Mini}>
        Mini
      </Button>
    </>
  )),
  args: {
    variant: ButtonVariant.Secondary,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

function SecondaryActiveInactiveDemo(
  props: React.ComponentProps<typeof Button>
) {
  const [active, setActive] = useState(true);
  const handleClick = useCallback(() => {
    setActive((prevActive) => !prevActive);
  }, []);
  return (
    <>
      <Button {...props} active={true}>
        Active
      </Button>
      <Button {...props} active={false}>
        Inactive
      </Button>
      <Button
        {...props}
        active={active}
        onClick={handleClick as any}
        iconStart={ThumbsUpIcon}
      >
        Toggle me
      </Button>
    </>
  );
}

export const SecondaryActiveInactive: Story = {
  render: (args) => <SecondaryActiveInactiveDemo {...argsToProps(args)} />,
  args: {
    children: 'Secondary Button',
    active: true,
    variant: ButtonVariant.Secondary,
    size: ButtonSize.Small,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const Tertiary: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Medium} icon={ThumbsUpIcon} />
      <Button {...props} size={ButtonSize.Small} icon={ThumbsUpIcon} />
      <Button {...props} size={ButtonSize.Mini} icon={ThumbsUpIcon} />
      <Button {...props} size={ButtonSize.Mini} icon={ThumbsUpIcon}>
        12345
      </Button>
      <Button
        {...props}
        size={ButtonSize.Small}
        shape={ButtonShape.Pill}
        icon={ShareArrowIcon}
      />
    </>
  )),
  args: {
    variant: ButtonVariant.Tertiary,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const TertiaryPill: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button {...props} size={ButtonSize.Medium} icon={ThumbsUpIcon} />
      <Button {...props} size={ButtonSize.Small} icon={ThumbsUpIcon} />
      <Button {...props} size={ButtonSize.Mini} iconEnd={LinkIcon}>
        Mini
      </Button>
    </>
  )),
  args: {
    variant: ButtonVariant.Tertiary,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

function TertiaryActiveInactiveDemo(
  props: React.ComponentProps<typeof Button>
) {
  const [active, setActive] = useState(true);
  const handleClick = useCallback(() => {
    setActive((prevActive) => !prevActive);
  }, []);
  return (
    <>
      <Button {...props} active={true}>
        Active
      </Button>
      <Button {...props} active={false}>
        Inactive
      </Button>
      <Button
        {...props}
        active={active}
        onClick={handleClick as any}
        iconStart={ThumbsUpIcon}
      >
        Toggle me
      </Button>
    </>
  );
}

export const TertiaryActiveInactive: Story = {
  render: (args) => <TertiaryActiveInactiveDemo {...argsToProps(args)} />,
  args: {
    active: true,
    variant: ButtonVariant.Tertiary,
    size: ButtonSize.Mini,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

function GlassActiveInactiveDemo(props: React.ComponentProps<typeof Button>) {
  const [active, setActive] = useState(true);
  const handleClick = useCallback(() => {
    setActive((prevActive) => !prevActive);
  }, []);
  return (
    <>
      <Button {...props} active={true}>
        Active
      </Button>
      <Button {...props} active={false}>
        Inactive
      </Button>
      <Button
        {...props}
        active={active}
        onClick={handleClick as any}
        iconStart={ThumbsUpIcon}
      >
        Toggle me
      </Button>
    </>
  );
}

export const GlassActiveInactive: Story = {
  render: (args) => <GlassActiveInactiveDemo {...argsToProps(args)} />,
  args: {
    variant: ButtonVariant.Glass,
    size: ButtonSize.Mini,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow className='-m-4 bg-[url("https://cdn-o.suno.com/auras/Aura-01.jpg")] bg-cover p-4'>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const IconOnly: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button
        {...props}
        variant={ButtonVariant.Glass}
        size={ButtonSize.Large}
        shape={ButtonShape.Pill}
        icon={PlayIcon}
      />
      <Button
        {...props}
        variant={ButtonVariant.Secondary}
        size={ButtonSize.Medium}
        shape={ButtonShape.Pill}
        icon={TrashIcon}
      />
      <Button
        {...props}
        variant={ButtonVariant.Tertiary}
        size={ButtonSize.Mini}
        shape={ButtonShape.Rounded}
        icon={ThumbsUpIcon}
        active={true}
      />
      <Button
        {...props}
        variant={ButtonVariant.Tertiary}
        size={ButtonSize.Mini}
        shape={ButtonShape.Rounded}
        icon={ThumbsDownIcon}
        active={false}
      />
      <Button
        {...props}
        variant={ButtonVariant.Tertiary}
        size={ButtonSize.Mini}
        shape={ButtonShape.Rounded}
        icon={ShareArrowIcon}
        active={false}
      />
      <Button
        {...props}
        size={ButtonSize.Small}
        shape={ButtonShape.Pill}
        icon={GiftIcon}
      />
    </>
  )),
  args: {
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const IconOnlyImageGlass: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button
        {...props}
        variant={ButtonVariant.ImageGlass}
        size={ButtonSize.Large}
        shape={ButtonShape.Pill}
        icon={MusicIcon}
      />
      <Button
        {...props}
        variant={ButtonVariant.ImageGlass}
        size={ButtonSize.Medium}
        shape={ButtonShape.Pill}
        icon={MusicIcon}
      />
      <Button
        {...props}
        variant={ButtonVariant.ImageGlass}
        size={ButtonSize.Small}
        shape={ButtonShape.Pill}
        icon={MusicIcon}
      />
      <Button
        {...props}
        variant={ButtonVariant.ImageGlass}
        size={ButtonSize.Mini}
        shape={ButtonShape.Pill}
        icon={MusicIcon}
      />
    </>
  )),
  args: {
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow className='-m-4 bg-[url("https://cdn-o.suno.com/auras/Aura-01.jpg")] bg-cover p-4'>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const LightDarkPrimary: Story = {
  render: renderWithArgsToProps((props) => (
    <>
      <Button
        {...props}
        variant={ButtonVariant.LightPrimary}
        size={ButtonSize.Medium}
        shape={ButtonShape.Rounded}
      >
        Light Primary
      </Button>
      <Button
        {...props}
        variant={ButtonVariant.DarkPrimary}
        size={ButtonSize.Medium}
        shape={ButtonShape.Rounded}
      >
        Dark Primary
      </Button>
      <Button
        {...props}
        variant={ButtonVariant.LightPrimary}
        size={ButtonSize.Small}
        shape={ButtonShape.Pill}
      >
        Light Medium
      </Button>
      <Button
        {...props}
        variant={ButtonVariant.DarkPrimary}
        size={ButtonSize.Small}
        shape={ButtonShape.Pill}
      >
        Dark Primary
      </Button>
    </>
  )),
  args: {
    onClick: fn(),
  },
  tags: ['!dev'],
  decorators: [
    (Story) => (
      <ButtonRow>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const StandardMediumRounded: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Standard,
    size: ButtonSize.Medium,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const StandardSmallRounded: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Standard,
    size: ButtonSize.Small,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const StandardMiniRounded: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Standard,
    size: ButtonSize.Mini,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const StandardMiniPill: Story = {
  render,
  args: {
    children: 'Button Label',
    iconStart: 'Icon',
    variant: ButtonVariant.Standard,
    size: ButtonSize.Mini,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const PrimaryMediumRounded: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Medium,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const PrimarySmallRounded: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Small,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const PrimaryMiniRounded: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Mini,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const PrimarySmallPill: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Small,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const PrimaryMiniPill: Story = {
  render,
  args: {
    children: 'Button Label',
    variant: ButtonVariant.Primary,
    size: ButtonSize.Mini,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const SecondarySmallPill: Story = {
  render,
  args: {
    children: 'Button Label',
    iconStart: ThumbsUpIcon,
    variant: ButtonVariant.Secondary,
    size: ButtonSize.Small,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const SecondaryMiniPill: Story = {
  render,
  args: {
    children: 'Button Label',
    iconEnd: LinkIcon,
    variant: ButtonVariant.Secondary,
    size: ButtonSize.Mini,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const TertiarySmallRounded: Story = {
  render,
  args: {
    icon: ThumbsUpIcon,
    variant: ButtonVariant.Tertiary,
    size: ButtonSize.Small,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const TertiaryMiniRounded: Story = {
  render,
  args: {
    icon: ThumbsUpIcon,
    variant: ButtonVariant.Tertiary,
    size: ButtonSize.Mini,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const GlassMiniRounded: Story = {
  render,
  args: {
    children: '12345',
    iconStart: ThumbsUpIcon,
    variant: ButtonVariant.Glass,
    size: ButtonSize.Mini,
    shape: ButtonShape.Rounded,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    size: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
  decorators: [
    (Story) => (
      <ButtonRow className='-m-4 bg-[url("https://cdn-o.suno.com/auras/Aura-01.jpg")] bg-cover p-4'>
        <Story />
      </ButtonRow>
    ),
  ],
};

export const Aura: Story = {
  render,
  args: {
    children: 'Create',
    icon: 'CreateIcon',
    variant: ButtonVariant.Aura,
    size: ButtonSize.Large,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const AuraCustom: Story = {
  render,
  args: {
    children: 'Create',
    icon: 'CreateIcon',
    variant: ButtonVariant.Aura,
    size: ButtonSize.Large,
    shape: ButtonShape.Pill,
    backgroundImage: 'https://cdn-o.suno.com/auras/Aura-02.jpg',
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
  },
};

export const LightPrimary: Story = {
  render,
  args: {
    children: 'Light Primary',
    variant: ButtonVariant.LightPrimary,
    size: ButtonSize.Medium,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const DarkPrimary: Story = {
  render,
  args: {
    children: 'Dark Primary',
    variant: ButtonVariant.DarkPrimary,
    size: ButtonSize.Medium,
    shape: ButtonShape.Pill,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const Secondary: Story = {
  render,
  args: {
    children: 'Secondary',
    variant: ButtonVariant.Secondary,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const LightSecondary: Story = {
  render,
  args: {
    children: 'Light Secondary',
    variant: ButtonVariant.LightSecondary,
    active: false,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const DarkSecondary: Story = {
  render,
  args: {
    children: 'Dark Secondary',
    variant: ButtonVariant.DarkSecondary,
    onClick: fn(),
  },
  argTypes: {
    variant: { table: { disable: true } },
    shape: { table: { disable: true } },
  },
};

export const IconAsComponent: Story = {
  render,
  args: {
    variant: ButtonVariant.Primary,
    size: ButtonSize.Large,
    shape: ButtonShape.Pill,
    icon: 'ThumbsUpIcon',
    onClick: fn(),
  },
  argTypes: {
    children: { table: { disable: true } },
  },
};

export const IconAsElement: Story = {
  render(args) {
    const props = argsToProps(args);
    if (typeof props.icon === 'function') {
      props.icon = React.createElement(props.icon, {});
    }
    return <Button {...props} />;
  },
  args: {
    variant: ButtonVariant.Primary,
    size: ButtonSize.Large,
    shape: ButtonShape.Pill,
    icon: 'ThumbsDownIcon',
    onClick: fn(),
  },
  argTypes: {
    children: { table: { disable: true } },
  },
};