import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

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';
import { footerDataMock } from '../../../../mocks/components/footer';
import { getKnobs } from '../../../tools/knobsHelper';

import { ProductProfilePage } from '../ProductProfilePage';
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 StickyButtonPageScroll from '../../../components/sticky-button-page-scroll/StickyButtonPageScroll';
import Footer from '../../../components/footer/Footer';

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
    }
];

<Meta
    title="Composite Demos/Product Profile Page"
    component={ProductProfilePage}
    parameters={{
        layout: 'fullscreen'
    }}
/>

### Default
<Canvas>
    <Story name="Default">
        <ProductProfilePage
            banner={<ProductBanner data={productBannerMock} />}
            tabMenu={<TabsMenu data={navigationMock} />}
            content={<PageOrderableContainer orderableComponents={productPageOrderableContainerData} />}
            slider={<ProductSimilarApps data={similarAppsMockData} />}
            scrollTop={<StickyButtonPageScroll settings={{ visibleDesktop: false }} />}
            footer={<Footer data={footerDataMock} settings={getKnobs(Footer.schema().form)} />}
        />
    </Story>
</Canvas>
