import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Card',
    component: 'bs-card',
}

export const example = props => {
    const image = props.showImage ? renderExampleImage() : ''

    return html`
        <bs-card style="width: 18rem;">
            ${props.imagePosition == 'top' ? image : ''}

            <bs-card-body>
                <h5 class="card-title">Card title</h5>
                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <bs-button variant="primary" href="#">Go somewhere</bs-button>
            </bs-card-body>

            ${props.imagePosition == 'bottom' ? image: ''}
        </bs-card>
    `
}

example.argTypes = {
    showImage: {
        control: {
            type: 'boolean'
        }
    },
    imagePosition: {
        control: {
            type: 'select',
            options: ['top', 'bottom'],
        }
    }
}

example.args = {
    showImage: true,
    imagePosition: 'top',
}

export const body = () => html`
    <div class="mb-5">
        <bs-card style="width: 18rem;">
            <bs-card-body>
                This is some text within a card body.
            </bs-card-body>
        </bs-card>
    </div>

    <div class="mb-5">
        <bs-card body="true" style="width: 18rem;">
            This is some text within a card body.
        </bs-card>
    </div>
`

export const titlesTextAndLinks = () => html`
    <div class="mb-5">
        <bs-card body="true" style="width: 18rem;">
            <h5>Card title</h5>
            <p class="subtitle">Card subtitle</p>

            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            
            <a href="#">Card link</a>
            <a href="#" class="ml-3">Another link</a>
        </bs-card>
    </div>
`

export const images = () => html`
    <div class="mb-5">
        <bs-card style="width: 18rem;">
            ${renderExampleImage()}

            <bs-card-body>
                <h5 class="card-title">Card title</h5>
                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <bs-button variant="primary" href="#">Go somewhere</bs-button>
            </bs-card-body>
        </bs-card>
    </div>
`

export const listGroups = () => html`
    <bs-card style="width: 18rem;">
        <bs-list-group flush="true">
            <bs-list-group-item>Cras justo odio</bs-list-group-item>
            <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
            <bs-list-group-item>Vestibulum at eros</bs-list-group-item>
        </bs-list-group>
    </bs-card>
`

export const kitchenSink = () => html`
    <bs-card style="width: 18rem;">
        ${renderExampleImage()}

        <bs-card-body>
            <h5>Card title</h5>
            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </bs-card-body>

        <bs-list-group flush="true">
            <bs-list-group-item>Cras justo odio</bs-list-group-item>
            <bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
            <bs-list-group-item>Vestibulum at eros</bs-list-group-item>
        </bs-list-group>

        <bs-card-body>
            <a href="#">Card link</a>
            <a href="#" class="ml-3">Another link</a>
        </bs-card-body>
    </bs-card>
`

export const headerAndFooter = () => html`
    <bs-card style="width: 18rem;">
        <bs-card-header>
            Featured
        </bs-card-header>
        
        <bs-card-body>
            <h5>Card title</h5>
            <p>With supporting text below as a natural lead-in to additional content.</p>
            <bs-button variant="primary" href="#">Go somewhere</bs-button>
        </bs-card-body>

        <bs-card-footer>
            2 days ago
        </bs-card-footer>
    </bs-card>
`

const renderExampleImage = () => html`
    <bs-card-image>
        <img src="https://via.placeholder.com/500x250.png?text=Example" alt="Example image" />
    </bs-card-image>
`
