import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { LAYOUT_DEFAULT, LAYOUT_DETAILED, LAYOUT_2COLUMNS } from '../../../constants/components/product-quickview';
import ProductQuickView from '../ProductQuickView';
// use the same mock as product slider, as quickview is child of slider
import { sliderProductsMock } from '../../../../mocks/product/slider';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const productData = sliderProductsMock[0];

<Meta title="Atoms/ProductQuickView" component={ProductQuickView} />

# ProductQuickView
<br />

## `ProductQuickViews` allows to show summarized details about a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductQuickView
            data={productData}
            settings={{ quickviewViewMode: LAYOUT_DEFAULT }}
        />
    </Story>
</Canvas>

### Detailed
<Canvas>
    <Story name="Detailed">
        <ProductQuickView
            data={productData}
            settings={{ quickviewViewMode: LAYOUT_DETAILED }}
        />
    </Story>
</Canvas>

### 2 columns
<Canvas>
    <Story name="2 columns">
        <ProductQuickView
            data={productData}
            settings={{ quickviewViewMode: LAYOUT_2COLUMNS }}
        />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <ProductQuickView
            settings={getKnobs(ProductQuickView.schema().form)}
            data={productData}
        />
    </Story>
</Canvas>


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

```jsx
import ProductQuickView from '@appdirect/sfb-theme-components/src/atoms/product-quick-view/ProductQuickView';
import { LAYOUT_DEFAULT } from '@appdirect/sfb-theme-components/src/atoms/product-quick-view/ProductQuickView';

<ProductQuickView data={productData} settings={{ quickviewViewMode: LAYOUT_DEFAULT }}/>
```

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