import { html } from 'lit-html'

const BUTTON_VARIANTS = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'dark',
    'light',
    'link',
    'outline-primary',
    'outline-secondary',
    'outline-success',
    'outline-danger',
    'outline-warning',
    'outline-info',
    'outline-dark',
    'outline-light',
]

const DIRECTIONS = [
    'auto',
    'auto-start',
    'auto-end',
    'top',
    'bottom',
    'right',
    'left',
    'top-start',
    'top-end',
    'bottom-start',
    'bottom-end',
    'right-start',
    'right-end',
    'left-start',
    'left-end',
]

export default {
    title: 'Bootstrap/Dropdown',
    component: 'bs-dropdown',
}

export const example = props => props.split ? html`
    <bs-dropdown 
        placement="${props.placement}" 
        show="${props.show}" 
        hide-on-click-outside="${props['hide-on-click-outside']}"
        split="true"
    >
        <bs-button-group slot="toggle">
            <bs-button variant="${props.buttonVariant}">
                Dropdown button
            </bs-button>
            
            <bs-button variant="${props.buttonVariant}">
                <span class="sr-only">Toggle Dropdown</span>
            </bs-button>
        </bs-button-group>

        ${renderDropdownMenu()}
    </bs-dropdown>
` : html`
    <bs-dropdown 
        placement="${props.placement}" 
        show="${props.show}" 
        caret="${props.caret}" 
        hide-on-click-outside="${props['hide-on-click-outside']}"
    >
        <bs-button variant="${props.buttonVariant}" slot="toggle">
            Dropdown button
        </bs-button>

        ${renderDropdownMenu()}
    </bs-dropdown>
`

example.argTypes = {
    placement: {
        control: {
            type: 'select',
            options: DIRECTIONS,
        },
    },
    buttonVariant: {
        control: {
            type: 'select',
            options: BUTTON_VARIANTS,
        },
    },
    show: {
        control: {
            type: 'boolean',
        },
    },
    caret: {
        control: {
            type: 'boolean',
        },
    },
    split: {
        control: {
            type: 'boolean',
        },
    },
    'hide-on-click-outside': {
        control: {
            type: 'boolean',
        },
    },
}

example.args = {
    placement: 'bottom-start',
    buttonVariant: 'secondary',
    show: false,
    caret: true,
    split: false,
    'hide-on-click-outside': true,
}

export const singleButton = () => html`
    <div class="mb-3">
        <bs-dropdown>
            <bs-button variant="secondary" slot="toggle">
                Dropdown button
            </bs-button>

            ${renderDropdownMenu()}
        </bs-dropdown>
    </div>
`

export const buttonVariants = () => html`
    ${BUTTON_VARIANTS.slice(0, 5).map(
        variant => html`
            <bs-dropdown>
                <bs-button variant="${variant}" slot="toggle">
                    <span style="text-transform: capitalize">${variant}</span>
                </bs-button>

                ${renderDropdownMenu()}
            </bs-dropdown>
        `,
    )}
`

export const splitButtons = () => html`
    ${BUTTON_VARIANTS.slice(0, 5).map(
        variant => html`
            <bs-dropdown split="true">
                <bs-button-group slot="toggle">
                    <bs-button variant="${variant}">
                        <span style="text-transform: capitalize">${variant}</span>
                    </bs-button>
                    
                    <bs-button variant="${variant}">
                        <span class="sr-only">Toggle Dropdown</span>
                    </bs-button>
                </bs-button-group>

                ${renderDropdownMenu()}
            </bs-dropdown>
        `,
    )}
`

export const sizing = () => html`
    <div class="mb-5">
        <bs-dropdown>
            <bs-button size="lg" variant="secondary" slot="toggle">
                Large button
            </bs-button>

            ${renderDropdownMenu()}
        </bs-dropdown>

        <bs-dropdown split="true">
            <bs-button-group size="lg" slot="toggle">
                <bs-button variant="secondary">
                    Large split button
                </bs-button>
                
                <bs-button variant="secondary">
                    <span class="sr-only">Toggle Dropdown</span>
                </bs-button>
            </bs-button-group>

            ${renderDropdownMenu()}
        </bs-dropdown>
    </div>

    <div class="mb-5">
        <bs-dropdown>
            <bs-button size="sm" variant="secondary" slot="toggle">
                Small button
            </bs-button>

            ${renderDropdownMenu()}
        </bs-dropdown>

        <bs-dropdown split="true">
            <bs-button-group size="sm" slot="toggle">
                <bs-button variant="secondary">
                    Small split button
                </bs-button>
                
                <bs-button variant="secondary">
                    <span class="sr-only">Toggle Dropdown</span>
                </bs-button>
            </bs-button-group>

            ${renderDropdownMenu()}
        </bs-dropdown>
    </div>
`

export const directions = () => html`
    <div class="ml-5">
        ${DIRECTIONS.map(direction => html`
            <div class="mb-5">
                <bs-dropdown placement="${direction}">
                    <bs-button variant="secondary" slot="toggle">
                        Drop ${direction}
                    </bs-button>

                    ${renderDropdownMenu()}
                </bs-dropdown>

                <bs-dropdown placement="${direction}" split="true">
                    <bs-button-group slot="toggle">
                        <bs-button variant="secondary">
                            Split ${direction}
                        </bs-button>
                        
                        <bs-button variant="secondary">
                            <span class="sr-only">Toggle Dropdown</span>
                        </bs-button>
                    </bs-button-group>

                    ${renderDropdownMenu()}
                </bs-dropdown>
            </div>
        `)}
    </div>
`

export const textContent = () => html`
    <bs-dropdown show="true">
        <bs-button variant="secondary" slot="toggle">
            Dropdown
        </bs-button>

        <div class="p-3">
            <h5>Hello</h5>
            <p>Here is some regular old text content</p>
            <p>And another line, <a href="#">embedded links</a> work too.</p>
        </div>
    </bs-dropdown>
`

const renderDropdownMenu = () => html`
    <h6 class="dropdown-header">Dropdown Header</h6>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <a href="#" class="active">Active link</a>
    <a href="#" class="disabled">Disabled link</a>
    <div class="dropdown-divider"></div>
    <a href="#">Separated Link</a>
`
