import React from 'react';

import { productListingMock } from '../../../../mocks/product/productListing';
import { productFiltersMock } from '../../../../mocks/product/productFilters';

import { ProductListingComponent } from '../../../components/product-listing/ProductListing';
import { CategorySidebarComponent } from '../../../components/category-sidebar/CategorySidebar';
import { ProductListingControlsComponent } from '../../../components/product-listing-controls/ProductListingControls';
import { ListPage } from '../ListPage';

const sidebarMockWithParams = {
    ...productFiltersMock,
    listing: {
        items: productListingMock.items,
        pagination: productListingMock.pagination,
        i18n: productListingMock.i18n
    }
};

export default {
    title: 'Composite Demos/Product Listing Page',
    component: ListPage,
    parameters: {
        layout: 'fullscreen',
        container: 'fluid'
    }
};

export const Default = () => {
    const listing = <ProductListingComponent data={productListingMock} />;
    const sidebar = <CategorySidebarComponent data={sidebarMockWithParams} />;
    const controls = <ProductListingControlsComponent data={productListingMock} />;

    return <ListPage listing={listing} sidebar={sidebar} controls={controls} />;
};
