import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import ProductViewerDescription from '../ProductViewerDescription';
import { multipleScreenshotsMock, singleScreenshotsMock, defaultMock as overviewImageMock, singleVideoMock, singleScreenshotWithoutOverviewMock } from '../../../../mocks/components/productViewerDescription';

export const productViewerDescriptionSettings = {
    layout: 'The layout you want for the image gallery (vertical-thumbnails, horizontal-thumbnails, titles, carets).',
    isPricesVisible: 'Show/Hide the pricing section.',
    isAddonsVisible: 'Show/Hide the addons section.'
};

<Meta title="Components/Product Viewer Description" component={ProductViewerDescription} />

# ProductViewerDescription
<br />

## `ProductViewerDescriptions` are used to display product's gallery and product's overview.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductViewerDescription data={multipleScreenshotsMock} />
    </Story>
</Canvas>

### Single screenshot
<Canvas>
    <Story name="Single screenshot">
        <ProductViewerDescription data={singleScreenshotWithoutOverviewMock} />
    </Story>
</Canvas>

### Single screenshot, with overview
<Canvas>
    <Story name="Single screenshot, with overview">
        <ProductViewerDescription data={singleScreenshotsMock} />
    </Story>
</Canvas>

### Single video, with overview
<Canvas>
    <Story name="Single video, with overview">
        <ProductViewerDescription data={singleVideoMock} />
    </Story>
</Canvas>


### With only overview image
<Canvas>
    <Story name="With only overview image">
        <ProductViewerDescription data={overviewImageMock} />
    </Story>
</Canvas>

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

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

```jsx
import ProductViewerDescription
    from '@appdirect/sfb-theme-components/src/components/product-viewer-description/ProductViewerDescription';

<ProductViewerDescription data={productViewerDescriptionData} />

```
## Props
<ArgsTable of={ProductViewerDescription} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={productViewerDescriptionSettings} />
</table>

### Form Output
<FormOutput code={ProductViewerDescription.schema().form} />
