import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import StickyBannerContainer from '../StickyBannerContainer';
import SelectionPreview from '../../selection-preview/SelectionPreview';
import { ProductEditionListComponent as ProductEditionList } from '../../product-edition/list/ProductEditionList';
import { editionsMockData as mockData } from '../../../../mocks/product/productEditions';
import { selectedAddonsMock } from '../../../../mocks/product/configuratorSelectedAddons';
import { productCardMock } from '../../../../mocks/product/productCard';

export const editionsData = {
    editions: mockData.items,
    i18n: mockData.i18n,
    callToActions: {
        items: [{
            label: 'Buy Now'
        }]
    }
};

<Meta title="Atoms (Preview)/Sticky Banner Container" component={StickyBannerContainer} />

# Sticky Banner
<br />

## `StickyBannerContainers` are used to build layouts with a sticky banner that shows
## in the top for desktop and in the bottom for mobile.
<br />

### Default
<Canvas>
    <Story name="Default">
        <StickyBannerContainer
            stickyBannerContent={(
                <div>
                    This is the sticky banner content.
                </div>
            )}
            content={
                <div>This is the content of the rest of the layout.</div>
            }
        />
    </Story>
</Canvas>

### Mobile
<Canvas>
    <Story name="Mobile">
        <div style={{ width: '320px' }}>
            <StickyBannerContainer
                stickyBannerContent={(
                    <div>
                        This is the sticky banner content.
                    </div>
                )}
                content={
                    <div>This is the content of the rest of the layout.</div>
                }
            />
        </div>
    </Story>
</Canvas>

### Simulating Configurator Layout
<Canvas>
    <Story name="Configurator">
        <div style={{ height: '500px' }}>
            <StickyBannerContainer
                stickyBannerContent={(
                    <SelectionPreview
                        data={{
                            configurator: selectedAddonsMock.configurator,
                            selectedEdition: selectedAddonsMock.configurator.selectedEdition,
                            callToActions: selectedAddonsMock.callToActions,
                            productImgSrc: productCardMock.logoSrc
                        }}
                    />
                )}
                content={<ProductEditionList data={editionsData} configuratorMode />}
            />
        </div>
    </Story>
</Canvas>


## Usage Example

```jsx
import StickyBannerContainer
from '@appdirect/sfb-theme-components/src/atoms/sticky-banner-container/StickyBannerContainer';

<StickyBannerContainer
    stickyBannerContent={
        <div>
            This is the sticky banner content.
        </div>
    }
    content={
        <div>This is the content of the rest of the layout.</div>
    }
/>

```
## Props

<ArgsTable of={StickyBannerContainer} />
