import React from 'react';
import dynamic from 'next/dynamic'
import { BlockTypes } from '../../../models/page';


const Accordion = dynamic(() => import('../../Accordion'))
const Benefits = dynamic(() => import('../../Benefits'))
const Capabilities = dynamic(() => import('../../Capabilities'))
const CapabilitiesIntroDetail = dynamic(() => import('../../CapabilitiesIntroDetail'))
const Case = dynamic(() => import('../../Case'))
const CaseContainer = dynamic(() => import('../../CaseContainer'))
const Claim = dynamic(() => import('../../Claim'))
const ContactUs = dynamic(() => import('../../ContactUs'))
const FormProject = dynamic(() => import('../../FormProject'))
const HighLights = dynamic(() => import('../../HighLights'))
const ImageTitleTextAndLink = dynamic(() => import('../../ImageTitleTextAndLink'))
const LatestProject = dynamic(() => import('../../LatestProject'))
const MeetUs = dynamic(() => import('../../MeetUs'))
const MultipleImagesContainer = dynamic(() => import('../../MultipleImagesContainer'))
const Next = dynamic(() => import('../../Next'))
const OpenPositionsList = dynamic(() => import('../../OpenPositionsList'))
const OurSolutionsWithLink = dynamic(() => import('../../OurSolutionsWithLink'))
const OurValues = dynamic(() => import('../../OurValues'))
const PartnerRelationships = dynamic(() => import('../../PartnerRelationships'))
const Positions = dynamic(() => import('../../Positions'))
const ProjectDetails = dynamic(() => import('../../ProjectDetails'))
const Related = dynamic(() => import('../../Related'))
const ServicesSolutions = dynamic(() => import('../../ServicesSolutions'))
const SubIntro = dynamic(() => import('../../SubIntro'))
const Team = dynamic(() => import('../../Team'))
const TeamShare = dynamic(() => import('../../Author'))
const TitleAndTextInColumns = dynamic(() => import('../../TitleAndTextInColumns'))
const TitleAndTextInRows = dynamic(() => import('../../TitleAndTextInRows'))
const Video = dynamic(() => import('../../Video'))
const WorkDetailIntro = dynamic(() => import('../../WorkDetailIntro'))
const WorkList = dynamic(() => import('../../WorkList'))
const BlogList = dynamic(() => import('../../BlogList'))
const Code = dynamic(() => import('../../Code'))





type Props = {
  type?: string;
};

const components = {
  [`${BlockTypes.Claim}`]: Claim,
  [`${BlockTypes.LatestProject}`]: LatestProject,
  [`${BlockTypes.OurSolutionsWithLink}`]: OurSolutionsWithLink,
  [`${BlockTypes.ImageTitleTextAndLink}`]: ImageTitleTextAndLink,
  [`${BlockTypes.Highlights}`]: HighLights,
  [`${BlockTypes.OpenPositions}`]: Positions,
  [`${BlockTypes.CapabilitiesHero}`]: SubIntro,
  [`${BlockTypes.ServiceColumns}`]: Capabilities,
  [`${BlockTypes.OurValues}`]: OurValues,
  [`${BlockTypes.PartnerRelationships}`]: PartnerRelationships,
  [`${BlockTypes.CapabilitiesIntroDetail}`]: CapabilitiesIntroDetail,
  [`${BlockTypes.TitleAndTextInColumns}`]: TitleAndTextInColumns,
  [`${BlockTypes.ServicesSolutions}`]: ServicesSolutions,
  [`${BlockTypes.Benefits}`]: Benefits,
  [`${BlockTypes.Case}`]: Case,
  [`${BlockTypes.Next}`]: Next,
  [`${BlockTypes.Related}`]: Related,
  [`${BlockTypes.TitleAndTextInRows}`]: TitleAndTextInRows,
  [`${BlockTypes.MeetUs}`]: MeetUs,
  [`${BlockTypes.OpenPositionsList}`]: OpenPositionsList,
  [`${BlockTypes.Accordion}`]: Accordion,
  [`${BlockTypes.Team}`]: Team,
  [`${BlockTypes.ContactUs}`]: ContactUs,
  [`${BlockTypes.FormProject}`]: FormProject,
  [`${BlockTypes.MultipleImageContainer}`]: MultipleImagesContainer,
  [`${BlockTypes.SingleImageContainer}`]: MultipleImagesContainer,
  [`${BlockTypes.WorkDetailIntro}`]: WorkDetailIntro,
  [`${BlockTypes.CaseContainer}`]: CaseContainer,
  [`${BlockTypes.Author}`]: TeamShare,
  [`${BlockTypes.ProjectDetails}`]: ProjectDetails,
  [`${BlockTypes.ProjectsList}`]: WorkList,
  [`${BlockTypes.Video}`]: Video,
  [`${BlockTypes.BlogArticlesList}`]: BlogList,
  [`${BlockTypes.Code}`]: Code,
};

const Block = ({ type, ...props }: Props): JSX.Element => {
  const Component = (type && components[type]) || null;
  if (!Component) return <></>;
  return <Component {...(props as any)} />;
};

export default Block;