import React from 'react';

import GridLayout from './grid-layout';
import CarouselSlider from './carousel-slider';
import MultiImageModuleBegoniaDefault from './layouts/begonia/default';
import MultiImageModuleCosmosSlider from './layouts/cosmos/slider';
import MultiImageModuleCosmosGrid from './layouts/cosmos/grid';

import { MULTI_IMAGE } from 'utils/constants/layouts-names';

import { MultiImageModuleProps, MultiImageTypes } from './multi-image-module.types';

const MULTI_IMAGES: MultiImageTypes = {
  [MULTI_IMAGE.GRID]: GridLayout,
  [MULTI_IMAGE.CAROUSEL_SLIDER]: CarouselSlider,
  [MULTI_IMAGE.BEGONIA_DEFAULT]: MultiImageModuleBegoniaDefault,
  [MULTI_IMAGE.COSMOS_SLIDER]: MultiImageModuleCosmosSlider,
  [MULTI_IMAGE.COSMOS_GRID]: MultiImageModuleCosmosGrid
}

const MultiImageModule = (props: MultiImageModuleProps): JSX.Element | null => {
  const { data: { layoutOption } } = props;
  const ProductList: any = MULTI_IMAGES[layoutOption];
  return <ProductList {...props} />;
};

export default MultiImageModule;