import { html } from 'lit-html'

const variations = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']

export default {
    title: 'Bootstrap/Spinners',
    component: 'bs-spinner',
}

export const example = props => html` <bs-spinner animation="${props.animation}" variant="${props.variant}" size="${props.size}" role="${props.role}"></bs-spinner> `

example.argTypes = {
    animation: {
        control: {
            type: 'select',
            options: ['border', 'grow'],
        },
    },
    variant: {
        control: {
            type: 'select',
            options: variations,
        },
    },
    size: {
        control: {
            type: 'select',
            options: ['', 'sm'],
        },
    },
    role: {
        control: {
            type: 'text',
        },
    },
}

example.args = {
    animation: 'border',
    variant: 'dark',
    size: '',
    role: 'status',
}

export const colors = () => html` ${variations.map(variant => html` <bs-spinner variant="${variant}"></bs-spinner> `)} `
export const growing = () => html`
    <div class="mb-3">
        <bs-spinner animation="grow"></bs-spinner>
    </div>

    <div class="mb-3">
        ${variations.map(variant => html` <bs-spinner variant="${variant}" animation="grow"></bs-spinner> `)}
    </div>
`

export const size = () => html`
    <div class="mb-5">
        <bs-spinner size="sm"></bs-spinner>
        <bs-spinner animation="grow" size="sm"></bs-spinner>
    </div>

    <div class="mb-3">
        <h6>You can also change the size using the CSS variables --spinner-size and --spinner-border-width</h6>

        <style>
            .large-spinner {
                --spinner-size: 4rem;
                --spinner-border-width: 6px;
            }
        </style>

        <bs-spinner variant="primary" class="large-spinner"></bs-spinner>
    </div>
`

export const buttons = () => html`
    <div class="mb-3">
        <bs-button variant="primary" size="lg" disabled>
            <bs-spinner aria-hidden="true"></bs-spinner>
        </bs-button>

        <bs-button variant="primary" size="lg" disabled>
            <bs-spinner aria-hidden="true"></bs-spinner>
            <span class="ml-2">Loading...</span>
        </bs-button>

        <bs-button variant="primary" size="lg" disabled>
            <bs-spinner animation="grow" aria-hidden="true"></bs-spinner>
        </bs-button>

        <bs-button variant="primary" size="lg" disabled>
            <bs-spinner animation="grow" aria-hidden="true"></bs-spinner>
            <span class="ml-2">Loading...</span>
        </bs-button>
    </div>

    <div class="mb-3">
        <bs-button variant="primary" disabled>
            <bs-spinner aria-hidden="true"></bs-spinner>
        </bs-button>

        <bs-button variant="primary" disabled>
            <bs-spinner aria-hidden="true"></bs-spinner>
            <span class="ml-2">Loading...</span>
        </bs-button>

        <bs-button variant="primary" disabled>
            <bs-spinner animation="grow" aria-hidden="true"></bs-spinner>
        </bs-button>

        <bs-button variant="primary" disabled>
            <bs-spinner animation="grow" aria-hidden="true"></bs-spinner>
            <span class="ml-2">Loading...</span>
        </bs-button>
    </div>

    <div class="mb-3">
        <bs-button variant="primary" size="sm" disabled>
            <bs-spinner aria-hidden="true"></bs-spinner>
        </bs-button>

        <bs-button variant="primary" size="sm" disabled>
            <bs-spinner aria-hidden="true"></bs-spinner>
            <span class="ml-1">Loading...</span>
        </bs-button>

        <bs-button variant="primary" size="sm" disabled>
            <bs-spinner animation="grow" aria-hidden="true"></bs-spinner>
        </bs-button>

        <bs-button variant="primary" size="sm" disabled>
            <bs-spinner animation="grow" aria-hidden="true"></bs-spinner>
            <span class="ml-1">Loading...</span>
        </bs-button>
    </div>
`
