import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';

import { BButtonGroup as MButtonGroup } from 'bootstrap-vue';
import MButtonWithBadgeWrapper from '../../Button/components/ButtonWithBadgeWrapper';
import MButton from '../../Button';
import MBadge from '../../Badge';
import MIcon from '../../Icon';

import ButtonGroupIntroduction from './content/ButtonGroupIntroduction.mdx';

import argTypesDefault from './config';

<Meta title="Button Group" component={MButtonGroup} />

export const DefaultCode = `
<m-button-group
  :aria-role="ariaRole"
  :size="size"
  :tag="tag"
  :vertical="vertical"
>
  <m-button class="px-3 justify-content-center">%</m-button>
  <m-button class="px-3 justify-content-center" theme="secondary">Rp</m-button>
</m-button-group>
`

export const TemplateDefault = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MButtonGroup, MButton },
  template: `
    ${DefaultCode}
  `
});

# Button Group

<ButtonGroupIntroduction />

## Split

<Canvas>
  <Story
    name="Split"
    argTypes={{ ...argTypesDefault }}
    parameters={{
      docs: {
        source: {
          code: DefaultCode
        }
      }
    }}
  >
    {TemplateDefault.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Split" />

export const MoreExampleSplit = (args) => ({
  props: Object.keys(argTypesDefault),
  components: {
    MButtonGroup,
    MButton,
    MIcon
  },
  template: `
    <m-button-group>
      <m-button class="pr-3">Button</m-button>
      <m-button
        class="btn-with-icon px-2"
        v-dropdown-mouseover
      >
        <m-icon variant="dropdown" />
      </m-button>
    </m-button-group>
  `
});

### More Example on Split Button Group

<Canvas>
  <Story
    name="example-split"
    argTypes={{ ...argTypesDefault }}
  >
    {MoreExampleSplit.bind({})}
  </Story>
</Canvas>

export const ButtonWithBadge = (args) => ({
  components: { MButton, MBadge, MIcon, MButtonWithBadgeWrapper },
  template: `
    <div class="d-flex">
      <div class="text-center">
        <p><strong>If label.length < 3</strong></p>
        <m-button-with-badge-wrapper>
          <m-button
            size="default"
            variant="icon-center"
            theme="white"
            icon-variant="chat"
          />
          <m-badge
            :rounded="true"
            size="slim"
            variant="danger"
            :label="9"
          />
        </m-button-with-badge-wrapper>
      </div>
      <div class="pl-4 text-center">
        <p><strong>If label.length >= 3</strong></p>
        <m-button-with-badge-wrapper>
          <m-button
            size="default"
            variant="icon-center"
            theme="white"
            icon-variant="chat"
          />
          <m-badge
            :rounded="true"
            size="slim"
            variant="danger"
            label="99+"
          />
        </m-button-with-badge-wrapper>
      </div>
    </div>
`
});

## Button with Badge

<Canvas>
  <Story name='Button with Badge'>
    {ButtonWithBadge.bind({})}
  </Story>
</Canvas>