import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { CarouselComponent as Carousel } from '../Carousel';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { carouselMockData } from '../../../../mocks/home/carousel';

export const settingsWithPreviewMode = Object.assign(
    {}, { slides: carouselMockData.slides }, { isPreviewMode: true }
);

export const settingsWithSlides = () => ({
    ...getKnobs(Carousel.schema().form),
    slides: carouselMockData.slides,
    backgroundImg: {
        url: 'http://lorempixel.com/g/800/600/abstract/'
    }
});

export const carouselSettings = {
    height: 'The height of the carousel (400, 555, 660).',
    backgroundType: 'The background mode. It can be color to use backgroundColor or image to use backgroundImg.',
    backgroundImg: 'The image used as background.',
    backgroundColor: 'The background color.',
    isDisplayCarets: 'Show/Hide the carousel carets.',
    isDisplayCaretsOnHover: 'Show the carets only on hover.',
    isDisplayDots: 'Enable/diable the dots below the carousel.',
    caretsColorTheme: 'The theme colour of the carets (dark or light)',
    isAutorotate: 'Enable/disable the automatic rotation of the slides.',
    delay: 'The rotation delay between slides.'
};

<Meta title="Components/Carousel" component={Carousel} />

# Carousel
<br />

## `Carousels` are used to build a carousel gallery of products.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Carousel
            data={carouselMockData.i18n}
            settings={{ slides: carouselMockData.slides }}
        />
    </Story>
</Canvas>

### Inside a smaller centered container
<Canvas>
    <Story name="Inside a smaller centered container">
        <div style={{ maxWidth: '992px', margin: '0 auto' }}>
            <Carousel settings={{ slides: carouselMockData.slides }} />
        </div>
    </Story>
</Canvas>

### Preview mode
<Canvas>
    <Story name="Preview mode">
        <Carousel settings={settingsWithPreviewMode} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <Carousel
            data={{ i18n: carouselMockData.i18n }}
            settings={settingsWithSlides()}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="settingsData"
    code={settingsWithSlides()}
/>
<br />
<CollapsibleJsonSnippet
    summary="carouselData"
    code={carouselMockData.i18n}
/>

```jsx
import Carousel from '@appdirect/sfb-theme-components/src/components/carousel/Carousel';

<Carousel
    data={carouselData}
    settings={settingsData}
/>
```

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

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

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