import React from "react";
import type { Decorator, Meta, StoryFn } from "@storybook/react";

import { ThemeProviderWithStyledEngine, Badge, Button } from "../index";

const disabled = {
  table: {
    disable: true,
  },
};

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Data Display/Badge",
  component: Badge,
  argTypes: {
    badgeContent: {
      name: "Badge amount",
      type: "string",
    },
    anchorOrigin: disabled,
    overlap: disabled,
    children: disabled,
    color: disabled,
    invisible: disabled,
    max: disabled,
    showZero: disabled,
    variant: disabled,
    ref: disabled,
  },
  decorators: [decorator],
} satisfies Meta<typeof Badge>;

export default meta;

const Template: StoryFn<typeof Badge> = (args) => {
  return (
    <Badge {...args}>
      <Button variant="outlined">Test me</Button>
    </Badge>
  );
};

export const Default: StoryFn<typeof Badge> = Template.bind({});

Default.args = {
  badgeContent: undefined,
  disabled: false,
};
