import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ProductListing from '../ProductListing';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { listingProductsMock } from '../../../../mocks/listingProducts';

export const productListingSettings = {
    iconSize: 'The icon size of the product (small or medium).',
    backgroundColor: 'The background color of each item in the listing.',
    borderRadius: 'The border radius of each item in the list.',
    isCompareVisible: 'Show/Hide the checkbox to compare products.',
    isRatingsVisible: 'Show/Hide the ratings.',
    isVendorVisible: 'Show/Hide the vendor name.',
    isBlurbVisible: 'Show/Hide the subtitle under the product name.',
    isOverviewVisible: 'Show/Hide the description of the product.',
    titleColor: 'The font color of the product name.'
};

<Meta title="Components/Product Listing" component={ProductListing} />


# ProductListing
<br />

## `ProductListings` are templates to show a set of products as a list or as a grid.
<br />

### As List
<Canvas>
    <Story name="As List">
        <ProductListing
            data={listingProductsMock}
            settings={getKnobs(ProductListing.schema().form)}
        />
    </Story>
</Canvas>

### As Grid
<Canvas>
    <Story name="As Grid">
        <ProductListing
            data={{ ...listingProductsMock, showAsGrid: true }}
            settings={getKnobs(ProductListing.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet summary="settingsData" code={getKnobs(ProductListing.schema().form)} />
<br />
<CollapsibleJsonSnippet summary="productListingData" code={listingProductsMock} />

```jsx
import ProductListing from '@appdirect/sfb-theme-components/src/components/product-listing/ProductListing';

<ProductListing
    data={productListingData}
    settings={settingsData}
/>
```

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

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

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