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

export const productReviewDetailSettings = {
    isAvatarVisible: 'Show/Hide the reviewer avatar.'
};

<Meta title="Components/Product Review Detail" component={ProductReviewDetail} />

# ProductReviewDetail
<br />

## `ProductReviewDetails` provide a template for product reviews.
<br />

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

### With single text
<Canvas>
    <Story name="With single text">
        <ProductReviewDetail
            data={{ ...genericReviewMock }}
            settings={getKnobs(ProductReviewDetail.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(ProductReviewDetail.schema().form)}
/>
<br />
<CollapsibleJsonSnippet
    summary="reviewData"
    code={genericReviewMock}
/>

```jsx
import ProductReviewDetail
from '@appdirect/sfb-theme-components/src/components/product-review-detail/ProductReviewDetail';

<ProductReviewDetail
    data={reviewData}
    settings={settingsData}
/>

```

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

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

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