import React, { Component, ReactNode } from 'react';

import { ProductListModuleProps, ProductListTypes } from './product-list-module.types';
import { PRODUCT_LIST } from 'utils/constants/layouts-names';

import ProductListModuleDefault from './layouts/product-list-module-default';
import ProductListModuleBegoniaTriple from './layouts/begonia/product-list-module-begonia-triple';
import ProductListModuleCosmosLeft from './layouts/cosmos/products-left';
import ProductListModuleCosmosRight from './layouts/cosmos/products-right';

const PRODUCT_LISTS: ProductListTypes = {
  [PRODUCT_LIST.SMALL]: ProductListModuleDefault,
  [PRODUCT_LIST.MEDIUM]: ProductListModuleDefault,
  [PRODUCT_LIST.MEDIUM_WITH_SIDE_HEADING]: ProductListModuleDefault,
  [PRODUCT_LIST.BEGONIA_TRIPLE]: ProductListModuleBegoniaTriple,
  [PRODUCT_LIST.COSMOS_PRODUCTS_LEFT]: ProductListModuleCosmosLeft,
  [PRODUCT_LIST.COSMOS_PRODUCTS_RIGHT]: ProductListModuleCosmosRight
};

class ProductListModule extends Component<ProductListModuleProps> {
  render(): ReactNode {
    const {data: {layoutOption}} = this.props;
    const ProductList: any = PRODUCT_LISTS[layoutOption];
    return ProductList ? <ProductList {...this.props} /> : null;
  }
}

export default ProductListModule;