import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Promobox from 'js/patterns/molecules/promobox/promobox'

import RadiobuttonWithLabel from 'js/patterns/molecules/forms/radiobutton-with-label'
import ProductListing from 'js/patterns/organisms/listings/product-listing'
import BundleListing from 'js/patterns/organisms/listings/bundle-listing'
import PaymentListingIcons from 'js/patterns/organisms/listings/payment-listing-icons'
import PaymentListing from 'js/patterns/organisms/listings/payment-listing'
import CategoryBoxes from 'js/patterns/organisms/listings/category-boxes'

<Meta title='4.Organisms|Listings' />

# Listings

## Product Listing
<Preview withToolbar>
    <Story name='Product Listing'>
        <ProductListing />
    </Story>
</Preview>

## Bundle Listing
<Preview withToolbar>
    <Story name='Bundle Listing'>
        <BundleListing cartItems={{}} />
    </Story>
</Preview>

## Payment Icons Listing
<Preview withToolbar>
    <Story name='Payment Icons Listing'>
        <BundleListing cartItems={{}} />
    </Story>
</Preview>

## Categories Listing
<Preview withToolbar>
    <Story name='Categories Listing'>
        <div>
            <section className='o-distance'>
                <div className='o-grid o-grid--medium-third'>
                    <Promobox />
                    <Promobox />
                    <Promobox />
                </div>
            </section>
            <section className='o-distance'>
                <div className='o-grid o-grid--medium-third'>
                    <div className='c-chip u-aspect-ratio-1x1 o-head-up'>
                        <div className='o-head-up__item o-head-up__item--middle'>
                            <a href='' title='' className='c-link'>Mütze</a>
                        </div>
                    </div>
                    <div className='c-chip u-aspect-ratio-1x1 o-head-up'>
                        <div className='o-head-up__item o-head-up__item--middle'>
                            <a href='' title='' className='c-link'>Mütze</a>
                        </div>
                    </div>
                    <a href='' title='' className='c-chip u-aspect-ratio-1x1 o-head-up'>
                        <div className='o-head-up__item o-head-up__item--middle'>
                            <span className='c-link'>Mütze</span>
                        </div>
                    </a>
                </div>
            </section>
        </div>
    </Story>
</Preview>

## Category Boxes Listing
<Preview withToolbar>
    <Story name='Category Boxes Listing'>
        <CategoryBoxes
            firstLabel='First'
            firstLink={{}}
            secondLabel='First'
            secondLink={{}}
            thirdLabel='First'
            thirdLink={{}}
        />
    </Story>
</Preview>

## Choices Listing
<Preview withToolbar>
    <Story name='Choices Listing'>
        <ul className='o-list-inline'>
            <li className='o-list-inline__item'>
                <RadiobuttonWithLabel label='Option #1' id='opt1' />
            </li>
            <li className='o-list-inline__item'>
                <RadiobuttonWithLabel label='Option #2' id='opt2' />
            </li>
            <li className='o-list-inline__item'>
                <RadiobuttonWithLabel label='Option #3' id='opt3' />
            </li>
            <li className='o-list-inline__item'>
                <RadiobuttonWithLabel label='Option #4' id='opt4' />
            </li>
        </ul>
    </Story>
</Preview>