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

export const knobs = () => Object.assign(
    getKnobs(CarouselSlideText.schema().form),
    {
        image: {
            url: 'http://placeimg.com/800/480/tech'
        }
    }
)

export const carouselSlideTextSettings = {
    title: 'The title to display.',
    blurb: 'The subtitle to display.',
    textSize: 'The subtitle font size [small, medium, large].',
    textColor: 'The subtitle color.',
    textAlignment: 'The title & subtitle alignment [left, right].',
    imageUrl: 'N/A',
    imagePosition: 'The alignment of the image [left, right].',
    url: 'The url to redirect to on button click (only visible if "url" is set).',
    buttonLabel: 'The button label (only visible if "url" is set).',
    backgroundColor: 'The background color.'
}

<Meta title="Atoms/Carousel Slide/Text" component={CarouselSlideText} />

# CarouselSlideText
<br />

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

### Default
<Canvas>
    <Story name="Default">
        <div style={{ height: '440px' }}>
            <CarouselSlideText data={textSlideMockData.slideData} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <div style={{ height: '440px' }}>
            <CarouselSlideText data={knobs()} />
        </div>
    </Story>
</Canvas>

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

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

<CarouselSlideText data={dataObj} />
```

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

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

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