import React from 'react';
import { ProductPage } from '../ProductPage';
import ProductBanner from '../../../components/product-banner/ProductBanner';
import TabsMenu from '../../../components/product-tabs-menu/TabsMenu';
import PageOrderableContainer from '../../../components/page-orderable-container/PageOrderableContainer';
import ProductSimilarApps from '../../../components/product-similar-apps/ProductSimilarApps';
import { productBannerMock } from '../../../../mocks/product/productBanner';
import { navigationMock } from '../../../../mocks/product/navigation';
import { similarAppsMockData } from '../../../../mocks/product/productSimilarApps';
import { multipleScreenshotsMock } from '../../../../mocks/components/productViewerDescription';
import { featuresMock } from '../../../../mocks/product/top-features';
import { customersMock } from '../../../../mocks/product/featured-customers';
import { reviewsMock } from '../../../../mocks/product/reviews';
import { additionalInfoMock } from '../../../../mocks/product/additionalInfo';
import { questionsMock } from '../../../../mocks/product/questions';


export const productPageOrderableContainerData = [
    {
        id: 'ProductDescription:orderable:7d023442-3800-4fb9-9577-e809dcf15dg5',
        name: 'ProductDescription',
        data: multipleScreenshotsMock
    },
    {
        id: 'ProductTopFeatures:orderable:7d021438-3800-4fb9-9555-e809dcf15df5',
        name: 'ProductTopFeatures',
        data: featuresMock
    },
    {
        id: 'FeaturedCustomers:orderable:6386f67e-dc0f-11ea-87d0-0242ac130004',
        name: 'FeaturedCustomers',
        data: {
            overview: customersMock
        }
    },
    {
        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: {}
    },
    {
        id: 'ProductQuestions:orderable:7d021332-3800-4fb9-9577-e804dcf15df1',
        name: 'ProductQuestions',
        data: questionsMock
    }
];

export default {
    title: 'Composite Demos/Product Page',
    component: ProductPage,
    parameters: {
        layout: 'fullscreen'
    }
};

export const Default = () => (
    <ProductPage
        banner={<ProductBanner data={productBannerMock} />}
        tabMenu={<TabsMenu data={navigationMock} />}
        content={<PageOrderableContainer orderableComponents={productPageOrderableContainerData} />}
        slider={<ProductSimilarApps data={similarAppsMockData} />}
    />
);
