import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductConfigurator from '../ProductConfigurator';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productConfiguratorMock,
    productConfiguratorNoAddToCartCartMock,
    productConfiguratorBackFromCartMock,
    productConfiguratorNoSelectedEditionsMock,
    productConfiguratorWithoutAddons,
    productConfiguratorUpgradeMock } from '../../../../mocks/product/productConfigurator';


<Meta title="Components/Product Configurator" component={ProductConfigurator} />

# ProductConfigurator
<br />

## `ProductConfigurators` are used to display and select from the available configurations for a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductConfigurator data={productConfiguratorMock} />
    </Story>
</Canvas>

### Without add to cart
<Canvas>
    <Story name="Without add to cart">
        <ProductConfigurator data={productConfiguratorNoAddToCartCartMock} />
    </Story>
</Canvas>

### Back from cart
<Canvas>
    <Story name="Back from cart">
        <ProductConfigurator data={productConfiguratorBackFromCartMock} />
    </Story>
</Canvas>

### Without selected edition
<Canvas>
    <Story name="Without selected edition">
        <ProductConfigurator data={productConfiguratorNoSelectedEditionsMock} />
    </Story>
</Canvas>

### Without addons
<Canvas>
    <Story name="Without addons">
        <ProductConfigurator data={productConfiguratorWithoutAddons} />
    </Story>
</Canvas>

### Upgrade
<Canvas>
    <Story name="Upgrade Button">
        <ProductConfigurator data={productConfiguratorUpgradeMock} />
    </Story>
</Canvas>

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

```jsx
import ProductConfigurator
from '@appdirect/sfb-theme-components/src/components/product-configurator/ProductConfigurator';

<ProductConfigurator data={productConfiguratorData} />

```

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