import MailIcon from '@mui/icons-material/Mail';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import Badge from '.';

const meta: Meta<typeof Badge> = {
  component: Badge,
  title: 'Design System/Badge',
  tags: ['autodocs'],
  argTypes: {
    badgeContent: {
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    color: {
      control: 'select',
      options: ['primary', 'error', 'success', 'warning', 'disabled'],
      table: {
        type: { summary: 'union' },
      },
    },
    invisible: {
      control: 'boolean',
      table: {
        defaultValue: { summary: 'false' },
      },
    },
    variant: {
      control: 'radio',
      options: ['dot', 'standard'],
      table: {
        type: { summary: 'union' },
        defaultValue: { summary: 'standard' },
      },
    },
    children: {
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    anchorOrigin: {
      control: 'object',
      table: {
        type: {
          summary:
            "{ horizontal: 'left' | 'right', vertical: 'bottom' | 'top' }",
        },
        defaultValue: { summary: "{ vertical: 'top', horizontal: 'right', }" },
      },
    },
  },
  args: {
    invisible: false,
    badgeContent: 4,
    color: 'primary',
    anchorOrigin: {
      vertical: 'top',
      horizontal: 'right',
    },
    children: <MailIcon sx={{ color: 'red' }} />,
  },
};

export default meta;

type Story = StoryObj<typeof Badge>;

export const Default: Story = {
  args: {},
};

export const Dot: Story = {
  args: {
    variant: 'dot',
  },
};

export const AnchorOrigin: Story = {
  args: {
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left',
    },
  },
};