import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Toast',
    component: 'bs-toast',
}

export const example = () => {
    return html`
        <div style="margin: 30px auto; max-width: 600px; padding:30px; background-color: #efefef;">
            <bs-button @click="${showToast}"> Launch toast </bs-button>
            <bs-toast name="Bootstrap" delay="90000" message="This is the content of the toast." gravity="top" position="right" />
        </div>
        <div style="margin: 30px auto; max-width: 600px; padding:30px; background-color: #efefef;">
            <bs-button @click="${showToast}"> Launch toast </bs-button>
            <bs-toast name="Bootstrap 2.0" delay="90000" message="This is the second content of the toast." gravity="top" position="right" />
        </div>
        <div style="margin: 30px auto; max-width: 600px; padding:30px; background-color: #efefef;">
            <bs-button @click="${hideToast}"> Hide toast </bs-button>
            <bs-toast autohide="false" show="true" can-close="true" message="This is the third content of the toast." gravity="top" position="right" />
        </div>
        <div style="margin: 30px auto; max-width: 600px; padding:30px; background-color: #efefef;">
            <bs-toast autohide="true" show="true" can-close="true" message="This is the fourth content of the toast." gravity="top" position="right" />
        </div>
    `
}
function showToast(e) {
    e.target.nextElementSibling.toastOpen()
}

function hideToast(e) {
    e.target.nextElementSibling.toastClose()
}
