import React, { Component, ReactNode } from 'react';
import { graphql, StaticQuery } from 'gatsby';
import { Box, Flex, Text } from '@rebass/emotion';
import { InstagramOverrides, InstagramProps } from './instagram-module.types';
import AsterDefault from './aster-default/aster-default';
import { SOCIAL } from '../../../../utils/constants/layouts-names';
import { InstagramModuleLayoutOptions } from '../../../../types/generator-page';
import BegoniaDefault from './begonia-default/begonia-default';

const instagramLayouts: { [key in InstagramModuleLayoutOptions]: React.ReactNode } = {
  [SOCIAL.ASTER_DEFAULT]: AsterDefault,
  [SOCIAL.BEGONIA_SEPTUPLE]: BegoniaDefault
};

export default class InstagramModule extends Component<InstagramProps> {

  render(): ReactNode {
    const { data: { numberOfPosts, layoutOption, capWidth } } = this.props
    const InstagramComponent: any = instagramLayouts[layoutOption];
    return (
      <StaticQuery
        query={graphql`
          query InstagramModuleQuery {
            siteConfig {
              merchant {
                projectId
              },
              instagramHandle
            }
            allDatoCmsInstagramPost {
              nodes {
                ...InstagramFragment
              }
            }
          }
        `}
        render={({allDatoCmsInstagramPost, siteConfig}: any): JSX.Element | undefined => {
          const overrides: InstagramOverrides = {
            arrows: false
          };

          if (!!InstagramComponent) {
            return (
              <InstagramComponent
                capWidth={capWidth}
                overrides={overrides}
                numberOfPosts={numberOfPosts}
                allDatoCmsInstagramPost={allDatoCmsInstagramPost}
                siteConfig={siteConfig}
              />
            );
          }
        }}
      />
    );
  }
}