import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { LAYOUT_HORIZONTAL, LAYOUT_VERTICAL, LAYOUT_TITLES, LAYOUT_CARETS } from '../../../constants/components/product-image-viewer';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { defaultMock, youtubeDemoMock, vimeoDemoMock, zoomDemoMock, youtubeDemoWithoutScreenshotsMock, tallImagesMock } from '../../../../mocks/components/productImageViewer';
import { ProductImageViewer } from '../ProductImageViewer';
import * as ProductImageViewerStories from './ProductImageViewer.stories';
import { getArgs } from '../../../tools/controlsHelper';

export const productImageViewerSettings = {
    layout: 'horizontal-thumbnails'
};

export const storyWrapperStyles = { width: '100%', maxWidth: 630, margin: '0' };

<Meta of={ProductImageViewerStories} />

# ProductImageViewer

<br />

## `ProductImageViewers` are used to build product image galleries.

<br />

### Horizontal

<Canvas>
  <Story of={ProductImageViewerStories.Horizontal} />
</Canvas>

### Vertical

<Canvas>
  <Story of={ProductImageViewerStories.Vertical} />
</Canvas>

### With titles

<Canvas>
  <Story of={ProductImageViewerStories.WithTitles} />
</Canvas>

### Carets only

<Canvas>
  <Story of={ProductImageViewerStories.CaretsOnly} />
</Canvas>

### Youtube demo

<Canvas>
  <Story of={ProductImageViewerStories.YoutubeDemo} />
</Canvas>

### Youtube demo + Overview image only

<Canvas>
  <Story of={ProductImageViewerStories.YoutubeDemoOverviewImageOnly} />
</Canvas>

### Vimeo demo

<Canvas>
  <Story of={ProductImageViewerStories.VimeoDemo} />
</Canvas>

### Zoom demo

<Canvas>
  <Story of={ProductImageViewerStories.ZoomDemo} />
</Canvas>

### With tall images

<Canvas>
  <Story of={ProductImageViewerStories.WithTallImages} />
</Canvas>

### With settings

<Canvas>
  <Story of={ProductImageViewerStories.WithSettings} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="productImageViewerData" code={defaultMock} />

<br />

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(ProductImageViewer.schema().form)} />

```jsx
import {
    ProductImageViewer
} from '@appdirect/sfb-theme-components/src/components/product-image-viewer/ProductImageViewer';

<ProductImageViewer data={productImageViewerData} settings={settingsData} />

```

## Props

<ArgsTable of={ProductImageViewer} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={productImageViewerSettings} />
</table>

### Form Output

<FormOutput code={ProductImageViewer.schema().form} />
