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

export const additionalInfoSettings = {
    columnCount: 'The number of colums of the component layout (1 or 2).',
    infoPosition: 'The position of the content relative at the sidebar (left/right).',
    headerBackground: 'The background color of the sidebar header.',
    sideBarBackground: 'The background color of the sidebar.',
    sideBarBorder: 'The border color of the sidebar.'
};

<Meta title="Components/Product Additional Info" component={AdditionalInfo} />

# AdditionalInfo
<br />

## `AdditionalInfos` are used to display the additional information of a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <AdditionalInfo data={additionalInfoMock} />
    </Story>
</Canvas>

### No sidebar
<Canvas>
    <Story name="No Sidebar">
        <AdditionalInfo data={noSidebarMock} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With Settings">
        <AdditionalInfo
            data={additionalInfoMock}
            settings={getKnobs(AdditionalInfo.schema().form)}
        />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="additionalInfoData"
    code={additionalInfoMock}
/>
<br />
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(AdditionalInfo.schema().form)}
/>

```jsx
import AdditionalInfo from '@appdirect/sfb-theme-components/src/components/product-additional-info/AdditionalInfo';

<AdditionalInfo data={additionalInfoData} settings={settingsData}/>
```

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

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

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