import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Nav',
    component: 'bs-nav',
}

export const example = props => html`
    <bs-nav variant="${props.variant}" fill="${props.fill}" justify="${props.justify}" vertical="${props.vertical}">
        <bs-nav-item href="#" active>Active</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
    </bs-nav>
`

example.argTypes = {
    variant: {
        control: {
            type: 'select',
            options: ['', 'tabs', 'pills']
        }
    },
    fill: {
        control: {
            type: 'boolean',
        }
    },
    justify: {
        control: {
            type: 'boolean',
        }
    },
    vertical: {
        control: {
            type: 'boolean',
        }
    }
}

example.args = {
    variant: '',
    fill: false,
    justify: false,
    vertical: false,
}

export const centered = () => html`
    <bs-nav class="justify-content-center">
        <bs-nav-item href="#" active>Active</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
    </bs-nav>
`

export const rightAligned = () => html`
    <bs-nav class="justify-content-end">
        <bs-nav-item href="#" active>Active</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
    </bs-nav>
`

export const vertical = () => html`
    <bs-nav vertical="true">
        <bs-nav-item href="#" active>Active</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
    </bs-nav>
`

export const tabs = () => html`
    <bs-nav variant="tabs">
        <bs-nav-item href="#" active>Active</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
    </bs-nav>
`

export const pills = () => html`
    <bs-nav variant="pills">
        <bs-nav-item href="#" active>Active</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#">Link</bs-nav-item>
        <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
    </bs-nav>
`

export const fill = () => html`
    <div class="mb-5">
        <bs-nav fill="true">
            <bs-nav-item href="#" active>Active</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
        </bs-nav>
    </div>

    <div class="mb-5">
        <bs-nav fill="true" variant="tabs">
            <bs-nav-item href="#" active>Active</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
        </bs-nav>
    </div>

    <div class="mb-5">
        <bs-nav fill="true" variant="pills">
            <bs-nav-item href="#" active>Active</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
        </bs-nav>
    </div>
`

export const justified = () => html`
    <div class="mb-5">
        <bs-nav justify="true">
            <bs-nav-item href="#" active>Active</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
        </bs-nav>
    </div>

    <div class="mb-5">
        <bs-nav justify="true" variant="tabs">
            <bs-nav-item href="#" active>Active</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
        </bs-nav>
    </div>

    <div class="mb-5">
        <bs-nav justify="true" variant="pills">
            <bs-nav-item href="#" active>Active</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#">Link</bs-nav-item>
            <bs-nav-item href="#" disabled>Disabled</bs-nav-item>
        </bs-nav>
    </div>
`
