import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { CarouselComponent as Carousel } from '../Carousel';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { carouselMockData } from '../../../../mocks/home/carousel';
import * as CarouselStories from './Carousel.stories';

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

export const settingsWithSlides = () => ({
    ...getArgs(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 of={CarouselStories} />

# Carousel

<br />

## `Carousels` are used to build a carousel gallery of products.

<br />

### Default

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

### Inside a smaller centered container

<Canvas>
  <Story of={CarouselStories.InsideASmallerCenteredContainer} />
</Canvas>

### Preview mode

<Canvas>
  <Story of={CarouselStories.PreviewMode} />
</Canvas>

### With settings

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