import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductSlider from '../ProductSlider';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { sliderMockSettings } from '../../../../mocks/home/slider';

export const getSettings = () => {
    const settingsWithDefaultProductType = getKnobs(ProductSlider.schema().form);
    settingsWithDefaultProductType.sliderProductType = 'defaultList';
    return {
        ...settingsWithDefaultProductType,
        ...sliderMockSettings.settings
    };
}

export const sliderSettings = {
    sliderOptions: 'Enables/Disables the scrolling (navigation buttons).',
    maxRows: 'This option is available when sliderOptions is disabled to show the slider content in 1, 2 or 3 rows.',
    buttonLabel: 'The label of the "See More" button next to the navigation buttons.',
    sliderTitle: 'The title of the slider.',
    layout: 'The layout of the slider (classic, square, horizontal, tall, graphic).',
    size: 'The size of the slides (small, medium, large).',
    tileBackgroundColor: 'The background color of the tiles.',
    tileCtaLabel: 'The text for the cta at the bottom of the tile when the layout is set to TALL.',
    displayOptions: 'An array of options to show/hide the description of the products and/or their reviews.',
    borderRadius: 'The border radius of the product icons.',
    quickviewOptions: 'Enable/disable the quickview of the products.',
    quickviewDisplayOptions: 'Enable/disable the screenshot of a product in its quickview.',
    quickviewViewMode: 'The layout options for the quickview (default, detailed, 2 columns).'
};

<Meta title="Components/Product Slider" component={ProductSlider} />

# ProductSlider
<br />

## `ProductSliders` are used to create customizable sliders from a set of products.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ width: '100%' }}>
            <ProductSlider {...sliderMockSettings} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <ProductSlider settings={getSettings()} />
    </Story>
</Canvas>

### Empty
<Canvas>
    <Story name="Empty">
        <ProductSlider settings={getKnobs(ProductSlider.schema().form)} />
    </Story>
</Canvas>

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

```jsx
import ProductSlider from '@appdirect/sfb-theme-components/src/components/product-slider/ProductSlider';

<ProductSlider settings={settingsData} />

```

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

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

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