import { html } from 'lit-html'

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

export default {
    title: 'Bootstrap/Alert',
    component: 'bs-alert',
}

export const example = props => html`
    <bs-alert 
        variant="${props.variant}"
        show="${props.show}"
        transition="${props.transition}"
        dismissible="${props.dismissible}"
        close-label="${props['close-label']}"
        @close="${props.close}"
    >
        ${props.text}
    </bs-alert>
`

example.argTypes = {
    'variant': {
        control: {
            type: 'select',
            options: variations,
        },
    },
    'show': {
        control: {
            type: 'boolean',
        },
    },
    'transition': {
        control: {
            type: 'select',
            options: ['fade', false],
        },
    },
    'dismissible': {
        control: {
            type: 'boolean',
        },
    },
    'close-label': {
        control: {
            type: 'text',
        },
    },
    'close': {
        action: 'Alert closed',
    },
}

example.args = {
    'variant': 'primary',
    'show': true,
    'transition': 'fade',
    'dismissible': true,
    'close-label': 'Close alert',
    'text': 'This is an alert',
}

export const basicAlerts = () => html`
    ${variations.map(
        variant => html`
            <bs-alert variant="${variant}">
                This is a ${variant} alert
            </bs-alert>
        `,
    )}
`

export const linksInAlerts = () => html`
    ${variations.map(
        variant => html`
            <bs-alert variant="${variant}"> This is a ${variant} alert with <a href="#">an example link</a>. The link should be styled to match the alert. </bs-alert>
        `,
    )}
`

export const additionalContent = () => html`
    <bs-alert variant="primary">
        <h4 class="alert-heading">Well done!</h4>
        <p>
            Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with
            this kind of content.
        </p>
        <hr />
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </bs-alert>
`

export const dismissingAlert = () => html`
    <bs-alert variant="primary" dismissible="true" @close=${() => alert('You closed the alert!')}>
        <strong>Hey!</strong> You can dismiss this by clicking the close button, try it out!
    </bs-alert>
`

export const actionButtons = () => html`
    <bs-alert variant="success" dismissible="true" @close=${() => alert('You closed the alert!')} style="max-width: 500px">
        <h4>Action buttons</h4>

        Action buttons can be handled pretty easily using flex classes like this!

        <hr>
        
        <div class="d-flex justify-content-between">
            <bs-button variant="outline-danger">Cancel</bs-button>
            <bs-button variant="outline-success">OK</bs-button>
        </div>
    </bs-alert>
`
