import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductListing from '../ProductListing';
import { getArgs } from '../../../tools/controlsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import { listingProductsMock } from '../../../../mocks/listingProducts';
import * as ProductListingStories from './ProductListing.stories';

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 of={ProductListingStories} />

# ProductListing

<br />

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

<br />

### As List

<Canvas>
  <Story of={ProductListingStories.AsList} />
</Canvas>

### As Grid

<Canvas>
  <Story of={ProductListingStories.AsGrid} />
</Canvas>

## Usage Example

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