import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { addonsMock, addonsWithDiscountsMock } from '../../../../../mocks/product/description/addons';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import { ProductAddonListComponent as ProductAddonList } from '../ProductAddonList';

export const addonsData = {
    addonProducts: {
        items: addonsMock,
        i18n: {
            addons: 'Add-ons available',
            selectAddonsTitle: 'Add-ons available for this plan',
            inclusions: 'Included'
        }
    }
};

<Meta title="Atoms/Product Addon List" component={ProductAddonList} />

# ProductAddonList
<br />

## `ProductAddonLists` are used to present the list of available addons for a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductAddonList data={addonsData} />
    </Story>
</Canvas>

### With discount
<Canvas>
    <Story name="With discount">
        <ProductAddonList
            data={
                {
                    ...addonsData,
                    addonProducts: {
                        ...addonsData.addonProducts,
                        items: addonsWithDiscountsMock
                    }
                }
            }
        />
    </Story>
</Canvas>

### Carousel
<Canvas>
    <Story name="Carousel">
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
            <ProductAddonList data={addonsData} carouselEnabled />
        </div>
    </Story>
</Canvas>

### Carousel and selectable
<Canvas>
    <Story name="Selectable">
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
            <ProductAddonList
                data={{
                    ...addonsData,
                    addonProducts: {
                        ...addonsData.addonProducts,
                        items: addonsData.addonProducts.items.slice(0, 3)
                    }
                }}
                selectedAddons={[addonsData.addonProducts.items[0]]}
                selectable
            />
        </div>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet summary="addonsData" code={addonsData} />

```jsx
import ProductAddonList from '@appdirect/sfb-theme-components/src/atoms/product-addons-list/ProductAddonList';

<ProductAddonList data={addonsData} />
```

## Props
<ArgsTable of={ProductAddonList} />
