import { THIRD_PARTY_APP_PRODUCT, THIRD_PARTY_APP_PRODUCT_LIST } from '@/config/url-prefix'
import { DefaultFooter, DefaultHeader } from '@@/app/_global/components/blocks'

export default [
  {
    path: '/',
    redirect: { name: 'ProductListMain' },
    component: () => {
      return import('@@/layouts/BaseLayout')
    },
    props: route => ({
      showHeader: route.query.showHeader === 'true',
      showFooter: route.query.showFooter === 'true',
    }),
    meta: {
      template: {
        header: DefaultHeader,
        footer: DefaultFooter,
        containerClass: 'product-list-screen',
      },
    },
    children: [
      {
        name: 'ProductListMain',
        path: THIRD_PARTY_APP_PRODUCT,
        redirect: { name: 'ProductListPaginated', params: { page: 1 } },
        component: {
          render(c) {
            return c('router-view')
          },
        },
        children: [
          {
            name: 'ProductListPaginated',
            path: THIRD_PARTY_APP_PRODUCT_LIST + '/:page?',
            component: () => import('@@/app/product-list/components/Listing'),
            props: {
              default: true,
              page: 1,
            },
            meta: {
              template: {
                containerClass: 'eshop-ext',
                subContainerClass: 'eshop',
              },
            },
          },
        ],
      },
    ],
  },
]
