import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import CategorySidebar from '../CategorySidebar';
import { getKnobs } from '../../../tools/knobsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';
import { productFiltersMock } from '../../../../mocks/product/productFilters';
import { productListingMock } from '../../../../mocks/product/productListing';

export const categorySidebarSettings = {
    sidebarHeight: 'The category sidebar height.',
    displayDividers: 'Show/Hide a divider line between each filter group.',
    displaySubcategories: 'Show/Hide sub-categories for each filter group.',
    displayRatings: 'Show/Hide rating filters.',
    displayAttributes: 'Show/Hide attributes filters.',
    backgroundColor: 'The background color of the sidebar.',
    borderColor: 'The border color of the sidebar.',
    headerBackgroundColor: 'The header background for each filter group.',
    displayHeaderBorder: 'Show/Hide a header underline for each filter group.',
    headerBorderColor: 'The color of the header underline for each filter group.',
    sectionHeaderPadding: 'The padding for the header section of each filter group.'
};

export const listingObject = {
    items: productListingMock.items,
    pagination: productListingMock.pagination,
    i18n: productListingMock.i18n
};
export const mockWithParams = { ...productFiltersMock, listing: listingObject };

<Meta title="Components/Category Sidebar" component={CategorySidebar} />

# CategorySidebar
<br />

## `CategorySidebars` are the sidebars in the listing page to filter the product listing content.
<br />

### Default
<Canvas>
    <Story name="Default">
        <CategorySidebar data={mockWithParams} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <CategorySidebar settings={getKnobs(CategorySidebar.schema().form)} />
    </Story>
</Canvas>

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

```jsx
import CategorySidebar from '@appdirect/sfb-theme-components/src/components/category-sidebar/CategorySidebar';

<CategorySidebar settings={settingsData} />

```
## Props

<ArgsTable of={CategorySidebar} />

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

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