import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import CategorySidebar from '../CategorySidebar';
import { getArgs } from '../../../tools/controlsHelper';
import { CollapsibleJsonSnippet, FormOutput, TableContentFromObject } from '../../../tools/docTools';
import { productFiltersMock } from '../../../../mocks/product/productFilters';
import { productListingMock } from '../../../../mocks/product/productListing';
import * as CategorySidebarStories from './CategorySidebar.stories';

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

# CategorySidebar

<br />

## `CategorySidebars` are the sidebars in the listing page to filter the product listing content.

<br />

### Default

<Canvas>
  <Story of={CategorySidebarStories.Default} />
</Canvas>

### With settings

<Canvas>
  <Story of={CategorySidebarStories.WithSettings} />
</Canvas>

## Usage Example

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