import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Pagination',
    component: 'bs-pagination',
}

const argTypes = {
    label: {
        control: {
            type: 'text'
        }
    },
    align: {
        control: {
            type: 'select',
            options: ['', 'center', 'right']
        }
    },
    size: {
        control: {
            type: 'select',
            options: ['', 'sm', 'lg']
        }
    },
}

const args = {
    label: 'Example page navigation',
    align: '',
    size: '',
}

export const example = props => html`
    <bs-pagination label="${props.label}" size="${props.size}" align="${props.align}" controlled="false">
        <bs-page-item>Previous</bs-page-item>
        <bs-page-item>1</bs-page-item>
        <bs-page-item>2</bs-page-item>
        <bs-page-item>3</bs-page-item>
        <bs-page-item>Next</bs-page-item>
    </bs-pagination>
`

example.argTypes = { ...argTypes }
example.args = { ...args }

export const workingWithIcons = () => html`
    <bs-pagination controlled="false">
        <bs-page-item>&laquo;</bs-page-item>
        
        <bs-page-item>1</bs-page-item>
        <bs-page-item>2</bs-page-item>
        <bs-page-item>3</bs-page-item>
        
        <bs-page-item>&raquo;</bs-page-item>
    </bs-pagination>
`

export const disabledAndActiveStates = () => html`
    <bs-pagination controlled="false">
        <bs-page-item disabled>Previous</bs-page-item>
        <bs-page-item>1</bs-page-item>
        <bs-page-item active>2</bs-page-item>
        <bs-page-item>3</bs-page-item>
        <bs-page-item>Next</bs-page-item>
    </bs-pagination>
`

export const sizing = () => html`
    <div class="mb-3">
        <bs-pagination controlled="false" size="lg">
            <bs-page-item disabled>Previous</bs-page-item>
            <bs-page-item>1</bs-page-item>
            <bs-page-item active>2</bs-page-item>
            <bs-page-item>3</bs-page-item>
            <bs-page-item>Next</bs-page-item>
        </bs-pagination>
    </div>

    <div class="mb-3">
        <bs-pagination controlled="false" size="sm">
            <bs-page-item disabled>Previous</bs-page-item>
            <bs-page-item>1</bs-page-item>
            <bs-page-item active>2</bs-page-item>
            <bs-page-item>3</bs-page-item>
            <bs-page-item>Next</bs-page-item>
        </bs-pagination>
    </div>
`

export const alignment = () => html`
    <bs-pagination controlled="false" centered>
        <bs-page-item disabled>Previous</bs-page-item>
        <bs-page-item>1</bs-page-item>
        <bs-page-item active>2</bs-page-item>
        <bs-page-item>3</bs-page-item>
        <bs-page-item>Next</bs-page-item>
    </bs-pagination>
`

export const controlled = (props) => html`
    <div>
        <bs-pagination page-count="28" @pagechanged="${props.pagechanged}"></bs-pagination>
    </div>

    <div>
        <bs-pagination page-count="3" @pagechanged="${props.pagechanged}"></bs-pagination>
    </div>
`

controlled.argTypes = {
    pagechanged: {
        action: 'Page changed',
    }
}

controlled.args = {}
