import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import FeatureDetails from '../FeatureDetails';
import { featureDetailsMocks, gSuiteFeatureDetailsMock, tSheetsFeatureDetailsMock, featureDetailsWithHTMLMock } from '../../../../mocks/components/featureDetails';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';

export const featureDetailsSettings = {
    columnCount: 'The number of columns in the component layout (1 or 2).',
    alignment: 'The text alignment (left, center, right).',
    imagePosition: 'Sets the position of the images (right, left or alternating right/left).',
    enableImageShadow: 'Show/Hide the image shadows.',
    imageShadowColor: 'Sets the image shadow color.',
    backgroundBlockingColor: 'The background color of the even content blocks.'
};

<Meta title="Components/Feature Details" component={FeatureDetails} />


# FeatureDetails
<br />

## `FeatureDetails` are templates to showcase the features of a product.
<br />

### Default
<Canvas>
    <Story name="Default">
        <FeatureDetails data={featureDetailsMocks} />
    </Story>
</Canvas>

### With a single characteristic per highlight
<Canvas>
    <Story name="With a single characteristic per highlight">
        <FeatureDetails
            data={tSheetsFeatureDetailsMock}
            settings={getKnobs(FeatureDetails.schema().form)}
        />
    </Story>
</Canvas>

### With multiple characteristics per highlight
<Canvas>
    <Story name="With multiple characteristics per highlight">
        <FeatureDetails
            data={gSuiteFeatureDetailsMock}
            settings={getKnobs(FeatureDetails.schema().form)}
        />
    </Story>
</Canvas>

### With HTML in a description
<Canvas>
    <Story name="With HTML in a description">
        <FeatureDetails
            data={featureDetailsWithHTMLMock}
            settings={getKnobs(FeatureDetails.schema().form)}
        />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet summary="productFeaturesData" code={featureDetailsMocks} />

<br />

<CollapsibleJsonSnippet
    summary="settingsData"
    code={getKnobs(FeatureDetails.schema().form)}
/>

```jsx
import FeatureDetails from '@appdirect/sfb-theme-components/src/components/product-feature-details/FeatureDetails';

<FeatureDetails
    data={productFeaturesData}
    settings={settingsData)}
/>
```

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

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

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