import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { productBannerMock, productBannerMultiButtonMock, productBannerCaptionMock, productBannerNoImageMock, productBannerNoActionMock, bundleBannerMock } from '../../../../mocks/product/productBanner';
import ProductBanner, { ProductBannerComponent } from '../ProductBanner';
import BundleBanner from '../BundleBanner';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, CollapsibleJsonSnippet, FormOutput } from '../../../tools/docTools';

export const bannerSettings = {
    backgroundType: 'The type of background for the banner, color or image',
    bannerBackgroundColor: 'If background type is color, the value for this color.',
    backgroundImg: 'If background type is image, the file that will be used as background.',
    textColor: 'The color of the text',
    showRatings: 'Boolean to indicate if the ratings of the product are displayed in the banner',
    settingsHeight: 'The height of the component, from a set of values (small, medium, large)',
    productNameSize: 'The size of the product name, from a set of values (small, medium, large)',
    descTextSize: 'The size of the description text, from a set of values (small, medium, large)'
};

<Meta title="components/Product Banner" component={ProductBannerComponent} />

# Product Banner
<br />

## `ProductBanners` are used to display main information about a product or a bundle.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductBanner data={productBannerMock} />
    </Story>
</Canvas>

### With missing image
<Canvas>
    <Story name="With missing image">
        <ProductBanner data={productBannerNoImageMock} />
    </Story>
</Canvas>

### With extra buttons
<Canvas>
    <Story name="With extra buttons">
        <ProductBanner data={productBannerMultiButtonMock} />
    </Story>
</Canvas>

### With subtext
<Canvas>
    <Story name="With subtext">
        <ProductBanner data={productBannerCaptionMock} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <ProductBanner data={productBannerMock} settings={getKnobs(ProductBannerComponent.schema().form)} />
    </Story>
</Canvas>

### With no actions
<Canvas>
    <Story name="With no actions">
        <ProductBanner data={productBannerNoActionMock} settings={getKnobs(ProductBannerComponent.schema().form)} />
    </Story>
</Canvas>

### Bundle Banner
<Canvas>
    <Story name="Bundle Banner">
        <BundleBanner data={bundleBannerMock} />
    </Story>
</Canvas>


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

```jsx
import ProductBanner from '@appdirect/sfb-theme-components/src/components/product-banner/ProductBanner';

<ProductBanner data={bannerData} settings={settingsData} />
```

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

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

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