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

export default {
    title: 'Bootstrap/Icon',
    component: 'bs-icon',
}

export const example = props => html`
    ${Object.keys(faIcons[props.icon].svg).map(
        iconStyle => html`
            <div class="mb-3 d-flex align-items-center">
                <span style="text-transform: capitalize;">
                    ${iconStyle}
                </span>

                <bs-icon class="ml-2" icon="${iconStyle == 'solid' || iconStyle == 'brands' ? 'fab' : 'fas'} fa-${props.icon}" size="${props.size}" />
            </div>
        `,
    )}
`

example.argTypes = {
    icon: {
        control: {
            type: 'select',
            options: Object.keys(faIcons),
        },
    },
    size: {
        control: {
            type: 'range',
            options: {
                min: 1,
                max: 100,
                step: 1,
            },
        },
    },
}

example.args = {
    icon: 'address-book',
    size: 16,
}

export const fontAwesomeIcons = () => html`
    <div class="d-flex flex-wrap">
        ${Object.keys(faIcons).map(iconName => {
            const icon = faIcons[iconName]

            return Object.keys(icon.svg).map(iconStyle => {
                return html`
                    <div class="m-3 d-flex flex-column align-items-center justify-content-center">
                        <bs-icon icon="${iconStyle == 'solid' || iconStyle == 'brands' ? 'fab' : 'fas'} fa-${iconName}" size="24"></bs-icon>
                    </div>
                `
            })
        })}
    </div>
`
