import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Button Group',
    component: 'bs-button-group',
}

export const example = props => html`
    <bs-button-group aria-label="Basic example" size="${props.size}" toggle="${props.toggle}" vertical="${props.vertical}">
        <bs-button variant="${props.variant}">Left</bs-button>
        <bs-button variant="${props.variant}">Middle</bs-button>
        <bs-button variant="${props.variant}">Right</bs-button>
    </bs-button-group>
`

example.argTypes = {
    variant: {
        control: {
            type: 'select',
            options: [
                'primary',
                'secondary',
                'success',
                'danger',
                'warning',
                'info',
                'dark',
                'light',
                'link',
                'outline-primary',
                'outline-secondary',
                'outline-success',
                'outline-danger',
                'outline-warning',
                'outline-info',
                'outline-dark',
                'outline-light',
            ],
        },
    },
    size: {
        control: {
            type: 'select',
            options: ['', 'sm', 'lg'],
        },
    },
    vertical: {
        control: {
            type: 'boolean',
        },
    },
}

example.args = {
    variant: 'secondary',
    size: '',
    toggle: false,
    vertical: false,
}

export const buttonToolbar = () => html`
    <bs-button-group role="toolbar" aria-label="Toolbar with button groups">
        <bs-button-group class="mr-2" aria-label="First group">
            <bs-button variant="secondary">1</bs-button>
            <bs-button variant="secondary">2</bs-button>
            <bs-button variant="secondary">3</bs-button>
            <bs-button variant="secondary">4</bs-button>
        </bs-button-group>

        <bs-button-group class="mr-2" aria-label="Second group">
            <bs-button variant="secondary">5</bs-button>
            <bs-button variant="secondary">6</bs-button>
            <bs-button variant="secondary">7</bs-button>
        </bs-button-group>

        <bs-button-group aria-label="Third group">
            <bs-button variant="secondary">8</bs-button>
        </bs-button-group>
    </bs-button-group>
`

export const sizing = () => html`
    <div class="mb-3">
        <bs-button-group size="lg">
            <bs-button variant="secondary">Left</bs-button>
            <bs-button variant="secondary">Middle</bs-button>
            <bs-button variant="secondary">Right</bs-button>
        </bs-button-group>
    </div>

    <div class="mb-3">
        <bs-button-group>
            <bs-button variant="secondary">Left</bs-button>
            <bs-button variant="secondary">Middle</bs-button>
            <bs-button variant="secondary">Right</bs-button>
        </bs-button-group>
    </div>

    <div class="mb-3">
        <bs-button-group size="sm">
            <bs-button variant="secondary">Left</bs-button>
            <bs-button variant="secondary">Middle</bs-button>
            <bs-button variant="secondary">Right</bs-button>
        </bs-button-group>
    </div>
`

export const vertical = () => html`
    <bs-button-group vertical>
        <bs-button variant="secondary">Link one</bs-button>
        <bs-button variant="secondary">Link two</bs-button>
        <bs-button variant="secondary">Link three</bs-button>
        <bs-button variant="secondary">Link four</bs-button>
    </bs-button-group>
`
