import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import ProductSimilarApps from '../ProductSimilarApps';
import { similarAppsMockData } from '../../../../mocks/product/productSimilarApps';

export const productSimilarAppsSettings = {
    sliderTitle: 'The title of the slider.',
    layout: 'The style of the slider\'s tiles.',
    size: 'The size of the slider\'s tiles (small, medium, large).',
    tileBackgroundColor: 'The background color of the slider\'s tiles.',
    tileCtaLabel: 'The text for the cta at the bottom of the tile when the layout is set to TALL.',
    displayOptions: 'Show/hide the slider\'s tiles description or ratings.',
    borderRadius: 'The border radius of the slider\'s tiles.',
    quickviewOptions: 'Show/hide the slider\'s tiles quickview.',
    sortBy: 'The ordering of the slider (alphabetical, random).'
};

<Meta title="Components/Product Similar Apps" component={ProductSimilarApps} />

# ProductSimilarApps
<br />

## `ProductSimilarApps` are used to display recommended apps in a slider.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductSimilarApps data={similarAppsMockData} />
    </Story>
</Canvas>

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

## Usage Example
<CollapsibleJsonSnippet
    summary="productSimilarAppsData"
    code={similarAppsMockData}
/>
<br />
<CollapsibleJsonSnippet
    summary="productSimilarAppsSettings"
    code={getKnobs(ProductSimilarApps.schema().form)}
/>

```jsx
import ProductSimilarApps from
    '@appdirect/sfb-theme-components/src/components/product-similar-apps/ProductSimilarApps';

<ProductSimilarApps data={productSimilarAppsData} settings={productSimilarAppsSettings} />
```

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

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

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