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

export const videoSlideMockData = carouselMockData.slides[0];

export const dataObj = Object.assign(
    videoSlideMockData.slideData,
    {
        videoUrl: 'https://www.youtube.com/watch?v=oHg5SJYRHA0',
        imageUrl: 'http://placeimg.com/800/480/tech'
    }
)

export const knobs = () => Object.assign(
    getKnobs(CarouselSlideVideo.schema().form),
    {
        videoUrl: 'https://www.youtube.com/watch?v=oHg5SJYRHA0',
        imageUrl: 'http://placeimg.com/800/480/tech'
    }
)

export const carouselSlideVedeoSettings = {
    title: 'The title to display.',
    blurb: 'The subtitle to display.',
    textColor: 'The play button color.',
    imageUrl: 'N/A',
    videoUrl: 'N/A',
    backgroundColor: 'The background color.'
}

<Meta title="Atoms/Carousel Slide/Video" component={CarouselSlideVideo} />

# CarouselSlideVideo
<br />

## `CarouselSlideVideos` can be used to display a text slide while also providing various props for customization.
<br />

### Default
<Canvas>
    <Story name="Default">
        <CarouselSlideVideo data={dataObj} settings={{ height: 440 }} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <CarouselSlideVideo data={knobs()} settings={{ height: 440 }} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="dataObj"
    code={dataObj}
/>

```jsx
import CarouselSlideVideo from '@appdirect/sfb-theme-components/src/atoms/carousel-slide-video/CarouselSlideVideo'

<CarouselSlideText data={dataObj} settings={{ height: 440 }} />
```
## Props
<ArgsTable of={CarouselSlideVideo} />

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

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