import { html } from 'lit-html'
import faIcons from '../../../icons/fontawesome/metadata/icons.json'

export default {
    title: 'Bootstrap/Button',
    component: 'bs-button',
}

export const example = props => html`
    <bs-button
        icon-left="${props['icon-left']}"
        icon-right="${props['icon-right']}"
        variant="${props.variant}"
        type="${props.type}"
        size="${props.size}"
        radius="${props.radius}"
        border="${props.border}"
        href="${props.href}"
        block="${props.block}"
        disabled="${props.disabled}"
        active="${props.active}"
    >
        ${props.buttonText}
    </bs-button>
`

example.argTypes = {
    'icon-left': {
        control: {
            type: 'select',
            options: [''].concat(Object.keys(faIcons)),
        },
    },
    'icon-right': {
        control: {
            type: 'select',
            options: [''].concat(Object.keys(faIcons)),
        },
    },
    'variant': {
        control: {
            type: 'select',
            options: [
                'basic',
                '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',
            ],
        },
    },
    'type': {
        control: {
            type: 'select',
            options: ['button', 'reset', 'submit'],
        },
    },
    'size': {
        control: {
            type: 'select',
            options: ['', 'sm', 'lg'],
        },
    },
    'radius' : {
        control: {
            type: 'select',
            options: ['rounded', 'rounded-top', 'rounded-right', 'rounded-bottom', 'rounded-left', 'rounded-circle', 'rounded-pill', 'rounded-0'],
        },
    },
    'border' : {
        control: {
            type: 'select',
            options: ['border', 'border-top', 'border-right', 'border-bottom', 'border-left'],
        },
    },    
    'href': {
        control: {
            type: 'text',
        },
    },
    'block': {
        control: {
            type: 'boolean',
        },
    },
    'disabled': {
        control: {
            type: 'boolean',
        },
    },
    'active': {
        control: {
            type: 'boolean',
        },
    },
}

example.args = {
    'icon-left': 'caret-square-left',
    'icon-right': '',
    'buttonText': 'Button',
    'variant': 'primary',
    'type': 'button',
    'href': '',
    'size': '',
    'radius': '',
    'border': '',
    'block': false,
    'disabled': false,
    'active': false,
}

export const basicButtons = props => html`
    <div class="mb-3">
        <bs-button variant="basic">Basic</bs-button>
        <bs-button variant="primary">Primary</bs-button>
        <bs-button variant="secondary">Secondary</bs-button>
        <bs-button variant="success">Success</bs-button>
        <bs-button variant="warning">Warning</bs-button>
        <bs-button variant="danger">Danger</bs-button>
        <bs-button variant="info">Info</bs-button>
        <bs-button variant="light">Light</bs-button>
        <bs-button variant="dark">Dark</bs-button>
        <bs-button variant="link">Link</bs-button>
    </div>
    <h4>Disabled State</h4>
    <div class="mb-3">
        <bs-button variant="basic" disabled="true">Basic</bs-button>
        <bs-button variant="primary" disabled="true">Primary</bs-button>
        <bs-button variant="secondary" disabled="true">Secondary</bs-button>
        <bs-button variant="success" disabled="true">Success</bs-button>
        <bs-button variant="warning" disabled="true">Warning</bs-button>
        <bs-button variant="danger" disabled="true">Danger</bs-button>
        <bs-button variant="info" disabled="true">Info</bs-button>
        <bs-button variant="light" disabled="true">Light</bs-button>
        <bs-button variant="dark" disabled="true">Dark</bs-button>
        <bs-button variant="link" disabled="true">Link</bs-button>
    </div>    
`

export const outlinedButtons = () => html`
    <div class="mb-3">
        <bs-button variant="outline-primary">Primary</bs-button>
        <bs-button variant="outline-secondary">Secondary</bs-button>
        <bs-button variant="outline-success">Success</bs-button>
        <bs-button variant="outline-warning">Warning</bs-button>
        <bs-button variant="outline-danger">Danger</bs-button>
        <bs-button variant="outline-info">Info</bs-button>
        <bs-button variant="outline-light">Light</bs-button>
        <bs-button variant="outline-dark">Dark</bs-button>
    </div>
`

export const iconButtons = () => html`
    <div class="mb-3">
        <bs-button icon-left="fab fa-arrow-left">
            Previous
        </bs-button>
        <bs-button>
            <bs-icon icon="fab-home" size="24" />
        </bs-button>
        <bs-button icon-right="fab fa-arrow-right">
            Next
        </bs-button>
    </div>
`

export const buttonTags = () => html`
    <div class="mb-3">
        <bs-button href="#">Link</bs-button>
        <bs-button type="submit">Submit</bs-button>
    </div>
`

export const sizes = () => html`
    <div class="mb-3">
        <bs-button variant="primary" size="lg">Large button</bs-button>
        <bs-button variant="secondary" size="lg">Large button</bs-button>
    </div>
    <div class="mb-3">
        <bs-button variant="primary" size="sm">Small button</bs-button>
        <bs-button variant="secondary" size="sm">Small button</bs-button>
    </div>
    <div class="mb-3">
        <bs-button variant="primary" block>Block button</bs-button>
        <bs-button variant="secondary" block>Block button</bs-button>
    </div>
`

export const activeState = () => html`
    <div class="mb-3">
        <bs-button href="#" active>Link</bs-button>
        <bs-button variant="secondary" href="#" active>Link</bs-button>
    </div>
`

export const disabledState = () => html`
    <div class="mb-3">
        <bs-button href="#" disabled>Disabled Link</bs-button>
        <bs-button disabled>Disabled Button</bs-button>
    </div>
`
