import React from 'react';
import { Box } from '@rebass/emotion'

import { ContentModuleContent } from 'types/generator-page';

import ModuleConfig from './content-module.config';
import { FluidContainer } from 'utils/styles/mixins';
import { getColumnSize } from 'utils/styles/grid';
import { moduleLayoutType } from 'utils/constants/layouts-names';

import { widths } from 'utils/theme';
import { moduleHasIsFullWidth, headerIsLeftAligned } from 'utils/constants/layout-behaviours';

import * as Styles from './content-modules.styles';

interface ContentModulesProps {
  modules: ContentModuleContent[];
  debugMode: boolean;
  headerLayoutOption: moduleLayoutType;
}

type GridModeType = 'desktop' | 'tablet' | 'mobile' | 'none';
const gridMode = 'desktop' as GridModeType;

const getNumColumns = (gridMode: GridModeType): number => {
  switch(gridMode) {
    case 'desktop': return 12;
    case 'mobile': return 4;
    case 'tablet': return 8;
    case 'none': return 0;
  }
  return 12;
}

const buildGrid = () => {
  const gridItems: JSX.Element[] = []
  for (let index = 0; index < getNumColumns(gridMode); index++) {
    gridItems.push(
      <Styles.gridColumn
        width={getColumnSize(1)}
        index={index}
        gutter={widths.gutterWidth}
        background={'red'}
        opacity={0.05}
        />
    )
  }

  if (gridMode === 'desktop') {
    return (
      <FluidContainer>
          {gridItems}
      </FluidContainer>
    )
  }
  return gridItems;
}

const ContentModules = (props: ContentModulesProps): JSX.Element => {
  const { modules, debugMode, headerLayoutOption } = props;
  return (
    <Box>
      { debugMode && buildGrid() }
      {
        modules.map((module, index) => {
          
          const configItem = ModuleConfig.find(block => block.type === module.type);
          
          // @ts-ignore not all the modules have these properties
          const fullWidthModule = moduleHasIsFullWidth(module.type, module.layoutOption)

          // @ts-ignore not all the modules have these properties
          const { fillBackground, backgroundColour, isFullWidthBackground, topPadding, bottomPadding } = module;
          const hasBackground = fillBackground ? { backgroundColour, isFullWidthBackground } : false;

          const isLeftNavigationLayout: boolean = headerIsLeftAligned(headerLayoutOption)

          if (configItem) {
            const Component: any = configItem.component;
            return (
              <Styles.ModuleWrapper
                as="section"
                topPadding={topPadding}
                bottomPadding={bottomPadding}
                fullWidthModule={fullWidthModule}
                key={`${module.originalId}_${index}`}
                isLeftNavigationLayout={isLeftNavigationLayout}
                debugMode={debugMode}
                background={hasBackground}
              >
                  <Component data={module} />
              </Styles.ModuleWrapper>
            );
          }
          return null;
        })
      }
    </Box>
  )
};

export default ContentModules;