import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import SelectionPreview from '../SelectionPreview';
import { selectedEditionsMock } from '../../../../mocks/product/configuratorSelectedEdition';
import { selectedAddonsMock, selectedAddonsMultiButtonMock } from '../../../../mocks/product/configuratorSelectedAddons';
import { productCardMock } from '../../../../mocks/product/productCard';

<Meta title="Atoms/Selection Preview" component={SelectionPreview} />

# SelectionPreview
<br />

## `SelectionPreviews` provide a template for product preview display.
<br />

### With only selected edition
<Canvas>
    <Story name="With only selected edition">
        <SelectionPreview
            data={{
                configurator: selectedEditionsMock.configurator,
                selectedEdition: selectedEditionsMock.configurator.selectedEdition,
                callToActions: selectedEditionsMock.callToActions
            }}
        />
    </Story>
</Canvas>

### With selected addons
<Canvas>
    <Story name="With selected addons">
        <SelectionPreview
            data={{
                configurator: selectedAddonsMock.configurator,
                selectedEdition: selectedAddonsMock.configurator.selectedEdition,
                selectedAddons: selectedAddonsMock.configurator.selectedAddons,
                callToActions: selectedAddonsMock.callToActions
            }}
        />
    </Story>
</Canvas>

### With image
<Canvas>
    <Story name="With image">
        <SelectionPreview
            data={{
                configurator: selectedAddonsMock.configurator,
                selectedEdition: selectedAddonsMock.configurator.selectedEdition,
                callToActions: selectedAddonsMock.callToActions,
                productImgSrc: productCardMock.logoSrc
            }}
        />
    </Story>
</Canvas>


### With multiple buttons
<Canvas>
    <Story name="With multiple buttons">
        <SelectionPreview
            data={{
                configurator: selectedAddonsMock.configurator,
                selectedEdition: selectedAddonsMock.configurator.selectedEdition,
                selectedAddons: selectedAddonsMock.configurator.selectedAddons,
                callToActions: selectedAddonsMultiButtonMock.callToActions
            }}
            manageAppActionHandler={() => selectedAddonsMultiButtonMock.callToActions}
        />
    </Story>
</Canvas>

### Condensed
<Canvas>
    <Story name="Condensed">
        <SelectionPreview
            data={{
                configurator: selectedAddonsMock.configurator,
                selectedEdition: selectedAddonsMock.configurator.selectedEdition,
                selectedAddons: selectedAddonsMock.configurator.selectedAddons,
                callToActions: selectedAddonsMultiButtonMock.callToActions
            }}
            isCondensed
            manageAppActionHandler={() => selectedAddonsMultiButtonMock.callToActions}
        />
    </Story>
</Canvas>

### Fullscreen
<Canvas>
    <Story name="Fullscreen" height="500px" inline={false}>
        <SelectionPreview
            data={{
                configurator: selectedAddonsMock.configurator,
                selectedEdition: selectedAddonsMock.configurator.selectedEdition,
                selectedAddons: selectedAddonsMock.configurator.selectedAddons,
                callToActions: selectedAddonsMultiButtonMock.callToActions
            }}
            isFullscreen
            manageAppActionHandler={() => selectedAddonsMultiButtonMock.callToActions}
        />
    </Story>
</Canvas>

## Usage Example
```jsx
import SelectionPreview from '@appdirect/sfb-theme-components/src/atoms/selection-preview/SelectionPreview';

<SelectionPreview data={selectionData} />
```
## Props

<ArgsTable of={SelectionPreview} />
