import React from 'react';
import {Meta, StoryFn} from "@storybook/react-webpack5";
import { bgs } from "@/constants.js"
import {Badge, BadgeProps} from './Badge';
import { Button } from '../Button/Button'

export default {
  title: 'atoms/Badge',
  component: Badge,
  argTypes: {},
} as Meta;

const Template: StoryFn<BadgeProps> = (args) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
      {
        Object.values(bgs).map(item => {
          const cbg = args.bg || item;
          return (
            <span key={item} style={{ margin: 8 }}>
              <Badge key={item} {...args} bg={cbg}>
                {item}
              </Badge>
            </span>
          )
        })
      }
    </div>
  );
};

export const _Badge = Template.bind({});
_Badge.args = {
  subtle: false,
};
export const _BadgeSubtle = Template.bind({});
_BadgeSubtle.args = {
  subtle: true,
};

const TemplateButton: StoryFn<BadgeProps> = (args) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
      {
        Object.values(bgs).map(item => {
          const cbg = args.bg || item;
          const text = args.text;
          return (
            <span key={item} style={{ margin: 8 }}>
              <Badge key={item} {...args} bg={cbg} text={text}>
                <Button variant="outline-primary">{item}</Button>
              </Badge>
            </span>
          )
        })
      }
    </div>
  );
};

export const _BadgeButton = TemplateButton.bind({});
_BadgeButton.args = {
  badge: '99',
  bg: '',
  subtle: false,
};