import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { productBannerMock, productBannerMultiButtonMock, productBannerCaptionMock, productBannerNoImageMock, productBannerNoActionMock, bundleBannerMock } from '../../../../mocks/product/productBanner';
import ProductBanner, { ProductBannerComponent } from '../ProductBanner';
import BundleBanner from '../BundleBanner';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, CollapsibleJsonSnippet, FormOutput } from '../../../tools/docTools';
import * as ProductBannerStories from './ProductBanner.stories';
  
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 of={ProductBannerStories} />

# Product Banner

<br />

## `ProductBanners` are used to display main information about a product or a bundle.

<br />

### Default

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

### With missing image

<Canvas>
  <Story of={ProductBannerStories.WithMissingImage} />
</Canvas>

### With extra buttons

<Canvas>
  <Story of={ProductBannerStories.WithExtraButtons} />
</Canvas>

### With subtext

<Canvas>
  <Story of={ProductBannerStories.WithSubtext} />
</Canvas>

### With settings

<Canvas>
  <Story of={ProductBannerStories.WithSettings} />
</Canvas>

### With no actions

<Canvas>
  <Story of={ProductBannerStories.WithNoActions} />
</Canvas>

### Bundle Banner

<Canvas>
  <Story of={ProductBannerStories.WithBundleBanner} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="bannerData" code={productBannerMock} />

<br />

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(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} />
