import { html } from 'lit-html'

const DIRECTIONS = [
    'top',
    'bottom',
    'right',
    'left',
]

export default {
    title: 'Bootstrap/Tooltip',
    component: 'bs-tooltip',
}

export const example = props => html`
<div class="mt-5">
    <bs-tooltip 
        placement="${props.placement}" 
        show="${props.show}" 
    >    
        <div slot="tooltip-content"><em>Tooltip</em> <u>with</u> <b>HTML</b></div>
        <bs-button variant="secondary" slot="for-element" >
           Tooltip with HTML
        </bs-button>
    </bs-tooltip>
</div>
`

example.argTypes = {
    placement: {
        control: {
            type: 'select',
            options: DIRECTIONS,
        },
    },
    show: {
        control: {
            type: 'boolean',
        },
    }
}

example.args = {
    placement: 'top',
    show: false,
}

export const directions = () => html`
    <div class="ml-5">
        ${DIRECTIONS.map(direction => html`
            <div class="mt-5" style="margin-left:50px;">
                <bs-tooltip placement="${direction}">
                    <div slot="tooltip-content">tooltip ${direction}</div>
                    <bs-button variant="secondary" slot="for-element">
                        tooltip on ${direction}
                    </bs-button>

                </bs-tooltip>
            </div>
           `)}
    </div>
`