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

export const reviewsData = { ...reviewsMock };
export const productReviewsSettings = {
    position: 'The position of the review statistics (left, top, right).',
    isAvatarVisible: 'Show/Hide the avatar of the reviwers.',
    moreReviewsLabel: 'The label of the "More Reviews" button.'
};

<Meta title="Components/Product Reviews" component={ProductReviews} />

# ProductReviews
<br />

## `ProductReviews` are containers that list the reviews for a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductReviews
            data={reviewsData}
            settings={getKnobs(ProductReviews.schema().form)}
        />
    </Story>
</Canvas>


## Usage Example
`ProductReviews` components should not be used directly. They need the `ProductReviewsAdapter`
which will perform GraphQL requests to get all the data needed to display the reviews.
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(ProductReviews.schema().form)}
/>
<br />
<CollapsibleJsonSnippet
    summary="reviewsData"
    code={reviewsData}
/>

```jsx
import ProductReviewsAdapter
from '@appdirect/sfb-theme-components/src/components/product-reviews/ProductReviewsAdapter';

<ProductReviewsAdapter
    data={reviewsData}
    settings={settingsData}
/>
```

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

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

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