import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import ProductViewerDescription from '../ProductViewerDescription';
import { multipleScreenshotsMock } from '../../../../mocks/components/productViewerDescription';
import * as ProductViewerDescriptionStories from './ProductViewerDescription.stories';

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 of={ProductViewerDescriptionStories} />

# ProductViewerDescription

<br />

## `ProductViewerDescriptions` are used to display product's gallery and product's overview.

<br />

### Default

<Canvas>
  <Story of={ProductViewerDescriptionStories.Default} />
</Canvas>

### Single screenshot

<Canvas>
  <Story of={ProductViewerDescriptionStories.SingleScreenshot} />
</Canvas>

### Single screenshot, with overview

<Canvas>
  <Story of={ProductViewerDescriptionStories.SingleScreenshotWithOverview} />
</Canvas>

### Single video, with overview

<Canvas>
  <Story of={ProductViewerDescriptionStories.SingleVideoWithOverview} />
</Canvas>

### With only overview image

<Canvas>
  <Story of={ProductViewerDescriptionStories.WithOnlyOverviewImage} />
</Canvas>

### With settings

<Canvas>
  <Story of={ProductViewerDescriptionStories.WithSettings} />
</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} />
