import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { LAYOUT_HORIZONTAL, LAYOUT_VERTICAL, LAYOUT_TITLES, LAYOUT_CARETS } from '../../../constants/components/product-image-viewer';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { defaultMock, youtubeDemoMock, vimeoDemoMock } from '../../../../mocks/components/productImageViewer';
import { ProductImageViewer } from '../ProductImageViewer';

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

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

<Meta title="Components/Product Image Viewer" component={ProductImageViewer} />

# ProductImageViewer
<br />

## `ProductImageViewers` are used to build product image galleries.
<br />


### Horizontal
<Canvas>
    <Story name="Horizontal">
        <div style={storyWrapperStyles}>
            <ProductImageViewer data={defaultMock} settings={{ layout: LAYOUT_HORIZONTAL }} />
        </div>
    </Story>
</Canvas>

### Vertical
<Canvas>
    <Story name="Vertical">
        <div style={storyWrapperStyles}>
            <ProductImageViewer data={defaultMock} settings={{ layout: LAYOUT_VERTICAL }} />
        </div>
    </Story>
</Canvas>

### With titles
<Canvas>
    <Story name="With titles">
        <div style={storyWrapperStyles}>
            <ProductImageViewer data={defaultMock} settings={{ layout: LAYOUT_TITLES }} />
        </div>
    </Story>
</Canvas>

### Carets only
<Canvas>
    <Story name="Carets only">
        <div style={storyWrapperStyles}>
            <ProductImageViewer data={defaultMock} settings={{ layout: LAYOUT_CARETS }} />
        </div>
    </Story>
</Canvas>

### Youtube demo
<Canvas>
    <Story name="Youtube demo">
        <div style={storyWrapperStyles}>
            <ProductImageViewer data={youtubeDemoMock} />
        </div>
    </Story>
</Canvas>

### Vimeo demo
<Canvas>
    <Story name="Vimeo demo">
        <div style={storyWrapperStyles}>
            <ProductImageViewer data={vimeoDemoMock} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <div style={storyWrapperStyles}>
            <ProductImageViewer
                data={defaultMock}
                settings={getKnobs(ProductImageViewer.schema().form)}
            />
        </div>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="productImageViewerData"
    code={defaultMock}
/>
<br />
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(ProductImageViewer.schema().form)}
/>

```jsx
import {
    ProductImageViewer
} from '@appdirect/sfb-theme-components/src/components/product-imageViewer/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} />
