import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductDescription from '../ProductDescription';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { defaultMock as mockData } from '../../../../mocks/components/productViewerDescription';

export const productDescriptionSettings = {
    isPricesVisible: 'Show/Hide the product price.',
    isAddonsVisible: 'Show/Hide the available addons.'
};

export const containerStyles = { maxWidth: 600, margin: '0 auto' };

<Meta title="Components/Product Description" component={ProductDescription} />

# ProductDescription
<br />

## `ProductDescriptions` are used to display a product description with price and addons.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductDescription data={mockData} />
    </Story>
</Canvas>

### Small container
<Canvas>
    <Story name="Small container">
        <div style={containerStyles}>
            <ProductDescription data={mockData} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <div style={containerStyles}>
            <ProductDescription
                data={mockData}
                settings={getKnobs(ProductDescription.schema().form)}
            />
        </div>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="descriptionData"
    code={mockData}
/>
<br />
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(ProductDescription.schema().form)}
/>

```jsx
import ProductDescription from '@appdirect/sfb-theme-components/src/components/product-description/ProductDescription';

<ProductDescription
    data={descriptionData}
    settings={settingsData}
/>

```

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

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

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