import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { PageOrderableContainer } from '../PageOrderableContainer';
import { sliderMockSettings } from '../../../../mocks/home/slider';
import { reviewsMock } from '../../../../mocks/product/reviews';
import { additionalInfoMock } from '../../../../mocks/product/additionalInfo';
import { carouselMockData } from '../../../../mocks/home/carousel';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as PageOrderableContainerStories from './PageOrderableContainer.stories';

export const defaultOrderableComponents = [{
    id: 'Slider:orderable:48b84b2c-dc0f-11ea-87d0-0242ac130003',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'Slider:orderable:6386f67e-dc0f-11ea-87d0-0242ac130003',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'Carousel:orderable:6a61530e-dc0f-11ea-87d0-0242ac130003',
    name: 'Carousel',
    settings: carouselMockData
}, {
    id: 'Slider:orderable:48b84b2c-dc0f-11ea-87d0-0242ac130004',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'Slider:orderable:6386f67e-dc0f-11ea-87d0-0242ac130004',
    name: 'Slider',
    ...sliderMockSettings
}, {
    id: 'ProductReviews:orderable:7d021438-3800-4fb9-9577-e809dcf15df7',
    name: 'ProductReviews',
    data: reviewsMock,
    settings: {}
}, {
    id: 'ProductAdditionalInfo:orderable:7d023338-3800-4fb9-9577-e809dcf15df7',
    name: 'ProductAdditionalInfo',
    data: additionalInfoMock,
    settings: {}
}];

<Meta of={PageOrderableContainerStories} />

# PageOrderableContainer

<br />

## `PageOrderableContainers` are used to list and reorder orderable components

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="pageOrderableContainerData" code={defaultOrderableComponents} />

```jsx
import PageOrderableContainer from '@appdirect/sfb-theme-components/src/components/page-orderable-container/PageOrderableContainer';

<PageOrderableContainer orderableComponents={pageOrderableContainerData} />
```

## Props

<ArgsTable of={PageOrderableContainer} />
