import * as React from "react";
import theme from "./theme";

import { HeaderLayouts } from "./Headers/types";
import {
  Header01,
  Header02,
  Header03,
  Header04,
  Header05,
  Header06,
  Header07,
  Header08,
  Header09,
  Header10,
  Header11,
  Header12,
  Header13,
  Header14,
  // Header15,
  Header16,
  Header17,
  Header18,
  Header19,
  Header20,
  Header21,
  Header22,
  Header23,
} from "./Headers";

import { BenefitLayouts } from "./Benefits/types";
import {
  Benefit01,
  Benefit02,
  Benefit03,
  Benefit04,
  Benefit05,
  Benefit06,
  Benefit07,
  Benefit08,
  Benefit09,
  Benefit10,
  Benefit11,
  Benefit12,
  Benefit13,
  Benefit14,
  Benefit15,
  Benefit16,
  Benefit17,
  Benefit18,
  Benefit19,
  Benefit20,
  Benefit21,
  Benefit22,
  Benefit23,
  Benefit24,
} from "./Benefits";

import { CTALayouts } from "./CTA/types";
import {
  CTA01,
  CTA02,
  CTA03,
  CTA04,
  CTA05,
  CTA06,
  CTA07,
  CTA08,
  CTA09,
  CTA10,
  CTA11,
  CTA12,
  CTA13,
  CTA14,
  CTA15,
  CTA16,
  CTA17,
  CTA18,
  CTA19,
  CTA20,
  CTA21,
  CTA22,
} from "./CTA";

import { ContentLayouts } from "./Content/types";
import {
  Content01,
  Content02,
  Content03,
  Content04,
  Content05,
  Content06,
  Content07,
  Content08,
  Content09,
  Content10,
  Content11,
  Content12,
  Content13,
  Content14,
  Content15,
  Content16,
  Content17,
  Content18,
  Content19,
} from "./Content";

import { PricingLayouts } from "./Pricing/types";
import {
  Pricing01,
  Pricing02,
  Pricing03,
  Pricing04,
  Pricing05,
  Pricing06,
} from "./Pricing";
import { SocialProofLayouts } from "./SocialProof/types";
import {
  SocialProof01,
  SocialProof02,
  SocialProof03,
  SocialProof04,
  SocialProof05,
  SocialProof06,
  SocialProof07,
  SocialProof08,
  SocialProof09,
  SocialProof10,
  SocialProof11,
  SocialProof12,
  SocialProof13,
  SocialProof14,
  SocialProof15,
} from "./SocialProof";

import { FormLayouts } from "./Forms/types";
import {
  Form01,
  Form02,
  Form03,
  Form04,
  Form05,
  Form06,
  Form07,
  Form08,
  Form09,
  Form10,
  Form11,
  Form12,
  Form13,
  Form14,
  Form15,
  Form16,
  Form17,
  Form18,
  Form19,
  Form20,
  Form21,
} from "./Forms";

import { NavigationLayouts } from "./Navigation/types";
import {
  Navigation01,
  Navigation02,
  Navigation03,
  Navigation04,
  Navigation05,
  Navigation06,
} from "./Navigation";

import { FooterLayouts } from "./Footers/types";
import {
  Footer01,
  Footer02,
  Footer03,
  Footer04,
  Footer05,
  Footer06,
  Footer07,
  Footer08,
  Footer09,
  Footer10,
  Footer11,
  // Footer12,
  Footer13,
  Footer14,
} from "./Footers";

import { GuaranteeLayouts } from "./Guarantee/types";
import { Guarantee01, Guarantee02, Guarantee03 } from "./Guarantee";

import { QuizLayouts } from "./Quiz/types";
import { Quiz01, Quiz02 } from "./Quiz";

import { UrgencyLayouts } from "./Urgency/types";
import {
  Urgency01,
  Urgency02,
  Urgency03,
  Urgency04,
  Urgency05,
  Urgency06,
} from "./Urgency";

import { iProps } from "./types";

const Layout: React.FC<iProps> = ({ type, data }) => {
  switch (type) {
    /**
     * Headers
     */
    case HeaderLayouts.ONE:
      return <Header01 data={data} />;
    case HeaderLayouts.TWO:
      return <Header02 data={data} />;
    case HeaderLayouts.THREE:
      return <Header03 data={data} />;
    case HeaderLayouts.FOUR:
      return <Header04 data={data} />;
    case HeaderLayouts.FIVE:
      return <Header05 data={data} />;
    case HeaderLayouts.SIX:
      return <Header06 data={data} />;
    case HeaderLayouts.SEVEN:
      return <Header07 data={data} />;
    case HeaderLayouts.EIGHT:
      return <Header08 data={data} />;
    case HeaderLayouts.NINE:
      return <Header09 data={data} />;
    case HeaderLayouts.TEN:
      return <Header10 data={data} />;
    case HeaderLayouts.ELEVEN:
      return <Header11 data={data} />;
    case HeaderLayouts.TWELVE:
      return <Header12 data={data} />;
    case HeaderLayouts.THIRTEEN:
      return <Header13 data={data} />;
    case HeaderLayouts.FOURTEEN:
      return <Header14 data={data} />;
    case HeaderLayouts.SIXTEEN:
      return <Header16 data={data} />;
    case HeaderLayouts.SEVENTEEN:
      return <Header17 data={data} />;
    case HeaderLayouts.EIGHTEEN:
      return <Header18 data={data} />;
    case HeaderLayouts.NINETEEN:
      return <Header19 data={data} />;
    case HeaderLayouts.TWENTY:
      return <Header20 data={data} />;
    case HeaderLayouts.TWENTYONE:
      return <Header21 data={data} />;
    case HeaderLayouts.TWENTYTWO:
      return <Header22 data={data} />;
    case HeaderLayouts.TWENTYTHREE:
      return <Header23 data={data} />;

    /**
     * Benefits
     */
    case BenefitLayouts.ONE:
      return <Benefit01 data={data} />;
    case BenefitLayouts.TWO:
      return <Benefit02 data={data} />;
    case BenefitLayouts.THREE:
      return <Benefit03 data={data} />;
    case BenefitLayouts.FOUR:
      return <Benefit04 data={data} />;
    case BenefitLayouts.FIVE:
      return <Benefit05 data={data} />;
    case BenefitLayouts.SIX:
      return <Benefit06 data={data} />;
    case BenefitLayouts.SEVEN:
      return <Benefit07 data={data} />;
    case BenefitLayouts.EIGHT:
      return <Benefit08 data={data} />;
    case BenefitLayouts.NINE:
      return <Benefit09 data={data} />;
    case BenefitLayouts.TEN:
      return <Benefit10 data={data} />;
    case BenefitLayouts.ELEVEN:
      return <Benefit11 data={data} />;
    case BenefitLayouts.TWELVE:
      return <Benefit12 data={data} />;
    case BenefitLayouts.THIRTEEN:
      return <Benefit13 data={data} />;
    case BenefitLayouts.FOURTEEN:
      return <Benefit14 data={data} />;
    case BenefitLayouts.FIFTEEN:
      return <Benefit15 data={data} />;
    case BenefitLayouts.SIXTEEN:
      return <Benefit16 data={data} />;
    case BenefitLayouts.SEVENTEEN:
      return <Benefit17 data={data} />;
    case BenefitLayouts.EIGHTEEN:
      return <Benefit18 data={data} />;
    case BenefitLayouts.NINETEEN:
      return <Benefit19 data={data} />;
    case BenefitLayouts.TWENTY:
      return <Benefit20 data={data} />;
    case BenefitLayouts.TWENTYONE:
      return <Benefit21 data={data} />;
    case BenefitLayouts.TWENTYTWO:
      return <Benefit22 data={data} />;
    case BenefitLayouts.TWENTYTHREE:
      return <Benefit23 data={data} />;
    case BenefitLayouts.TWENTYFOUR:
      return <Benefit24 data={data} />;

    /**
     * CTAs
     */
    case CTALayouts.ONE:
      return <CTA01 data={data} />;
    case CTALayouts.TWO:
      return <CTA02 data={data} />;
    case CTALayouts.THREE:
      return <CTA03 data={data} />;
    case CTALayouts.FOUR:
      return <CTA04 data={data} />;
    case CTALayouts.FIVE:
      return <CTA05 data={data} />;
    case CTALayouts.SIX:
      return <CTA06 data={data} />;
    case CTALayouts.SEVEN:
      return <CTA07 data={data} />;
    case CTALayouts.EIGHT:
      return <CTA08 data={data} />;
    // case CTALayouts.NINE:
    //   return <CTA09 data={data} />;
    case CTALayouts.TEN:
      return <CTA10 data={data} />;
    case CTALayouts.ELEVEN:
      return <CTA11 data={data} />;
    case CTALayouts.TWELVE:
      return <CTA12 data={data} />;
    case CTALayouts.THIRTEEN:
      return <CTA13 data={data} />;
    case CTALayouts.FOURTEEN:
      return <CTA14 data={data} />;
    case CTALayouts.FIFTEEN:
      return <CTA15 data={data} />;
    case CTALayouts.SIXTEEN:
      return <CTA16 data={data} />;
    case CTALayouts.SEVENTEEN:
      return <CTA17 data={data} />;
    case CTALayouts.EIGHTEEN:
      return <CTA18 data={data} />;
    case CTALayouts.NINETEEN:
      return <CTA19 data={data} />;
    case CTALayouts.TWENTY:
      return <CTA20 data={data} />;
    case CTALayouts.TWENTYONE:
      return <CTA21 data={data} />;
    case CTALayouts.TWENTYTWO:
      return <CTA22 data={data} />;

    /**
     * Contents
     */
    case ContentLayouts.ONE:
      return <Content01 data={data} />;
    case ContentLayouts.TWO:
      return <Content02 data={data} />;
    case ContentLayouts.THREE:
      return <Content03 data={data} />;
    case ContentLayouts.FOUR:
      return <Content04 data={data} />;
    case ContentLayouts.FIVE:
      return <Content05 data={data} />;
    case ContentLayouts.SIX:
      return <Content06 data={data} />;
    case ContentLayouts.SEVEN:
      return <Content07 data={data} />;
    case ContentLayouts.EIGHT:
      return <Content08 data={data} />;
    case ContentLayouts.NINE:
      return <Content09 data={data} />;
    case ContentLayouts.TEN:
      return <Content10 data={data} />;
    case ContentLayouts.ELEVEN:
      return <Content11 data={data} />;
    case ContentLayouts.TWELVE:
      return <Content12 data={data} />;
    case ContentLayouts.THIRTEEN:
      return <Content13 data={data} />;
    case ContentLayouts.FOURTEEN:
      return <Content14 data={data} />;
    case ContentLayouts.FIFTEEN:
      return <Content15 data={data} />;
    case ContentLayouts.SIXTEEN:
      return <Content16 data={data} />;
    case ContentLayouts.SEVENTEEN:
      return <Content17 data={data} />;
    case ContentLayouts.EIGHTEEN:
      return <Content18 data={data} />;
    case ContentLayouts.NINETEEN:
      return <Content19 data={data} />;

    /**
     * Pricing
     */
    case PricingLayouts.ONE:
      return <Pricing01 data={data} />;
    case PricingLayouts.TWO:
      return <Pricing02 data={data} />;
    case PricingLayouts.THREE:
      return <Pricing03 data={data} />;
    case PricingLayouts.FOUR:
      return <Pricing04 data={data} />;
    case PricingLayouts.FIVE:
      return <Pricing05 data={data} />;
    case PricingLayouts.SIX:
      return <Pricing06 data={data} />;

    /**
     * Social Proof
     */
    case SocialProofLayouts.ONE:
      return <SocialProof01 data={data} />;
    case SocialProofLayouts.TWO:
      return <SocialProof02 data={data} />;
    case SocialProofLayouts.THREE:
      return <SocialProof03 data={data} />;
    case SocialProofLayouts.FOUR:
      return <SocialProof04 data={data} />;
    case SocialProofLayouts.FIVE:
      return <SocialProof05 data={data} />;
    case SocialProofLayouts.SIX:
      return <SocialProof06 data={data} />;
    case SocialProofLayouts.SEVEN:
      return <SocialProof07 data={data} />;
    case SocialProofLayouts.EIGHT:
      return <SocialProof08 data={data} />;
    case SocialProofLayouts.NINE:
      return <SocialProof09 data={data} />;
    case SocialProofLayouts.TEN:
      return <SocialProof10 data={data} />;
    case SocialProofLayouts.ELEVEN:
      return <SocialProof11 data={data} />;
    case SocialProofLayouts.TWELVE:
      return <SocialProof12 data={data} />;
    case SocialProofLayouts.THIRTEEN:
      return <SocialProof13 data={data} />;
    case SocialProofLayouts.FOURTEEN:
      return <SocialProof14 data={data} />;
    case SocialProofLayouts.FIFTEEN:
      return <SocialProof15 data={data} />;

    /**
     * Forms
     */
    case FormLayouts.ONE:
      return <Form01 data={data} />;
    case FormLayouts.TWO:
      return <Form02 data={data} />;
    case FormLayouts.THREE:
      return <Form03 data={data} />;
    case FormLayouts.FOUR:
      return <Form04 data={data} />;
    case FormLayouts.FIVE:
      return <Form05 data={data} />;
    case FormLayouts.SIX:
      return <Form06 data={data} />;
    case FormLayouts.SEVEN:
      return <Form07 data={data} />;
    case FormLayouts.EIGHT:
      return <Form08 data={data} />;
    case FormLayouts.NINE:
      return <Form09 data={data} />;
    case FormLayouts.TEN:
      return <Form10 data={data} />;
    case FormLayouts.ELEVEN:
      return <Form11 data={data} />;
    case FormLayouts.TWELVE:
      return <Form12 data={data} />;
    case FormLayouts.THIRTEEN:
      return <Form13 data={data} />;
    case FormLayouts.FOURTEEN:
      return <Form14 data={data} />;
    case FormLayouts.FIFTEEN:
      return <Form15 data={data} />;
    case FormLayouts.SIXTEEN:
      return <Form16 data={data} />;
    case FormLayouts.SEVENTEEN:
      return <Form17 data={data} />;
    case FormLayouts.EIGHTEEN:
      return <Form18 data={data} />;
    case FormLayouts.NINETEEN:
      return <Form19 data={data} />;
    case FormLayouts.TWENTY:
      return <Form20 data={data} />;
    case FormLayouts.TWENTYONE:
      return <Form21 data={data} />;

    /**
     * Footers
     */
    case FooterLayouts.ONE:
      return <Footer01 data={data} />;
    case FooterLayouts.TWO:
      return <Footer02 data={data} />;
    case FooterLayouts.THREE:
      return <Footer03 data={data} />;
    case FooterLayouts.FOUR:
      return <Footer04 data={data} />;
    case FooterLayouts.FIVE:
      return <Footer05 data={data} />;
    case FooterLayouts.SIX:
      return <Footer06 data={data} />;
    case FooterLayouts.SEVEN:
      return <Footer07 data={data} />;
    case FooterLayouts.EIGHT:
      return <Footer08 data={data} />;
    case FooterLayouts.NINE:
      return <Footer09 data={data} />;
    case FooterLayouts.TEN:
      return <Footer10 data={data} />;
    case FooterLayouts.ELEVEN:
      return <Footer11 data={data} />;
    // case FooterLayouts.TWELVE:
    // return <Footer12 data={data} />;
    case FooterLayouts.THIRTEEN:
      return <Footer13 data={data} />;
    case FooterLayouts.FOURTEEN:
      return <Footer14 data={data} />;

    /**
     * Navigation Layouts
     */
    case NavigationLayouts.ONE:
      return <Navigation01 data={data} />;
    case NavigationLayouts.TWO:
      return <Navigation02 data={data} />;
    case NavigationLayouts.THREE:
      return <Navigation03 data={data} />;
    case NavigationLayouts.FOUR:
      return <Navigation04 data={data} />;
    case NavigationLayouts.FIVE:
      return <Navigation05 data={data} />;
    case NavigationLayouts.SIX:
      return <Navigation06 data={data} />;

    /**
     * Urgency Layouts
     */
    case UrgencyLayouts.ONE:
      return <Urgency01 data={data} />;
    case UrgencyLayouts.TWO:
      return <Urgency02 data={data} />;
    case UrgencyLayouts.THREE:
      return <Urgency03 data={data} />;
    case UrgencyLayouts.FOUR:
      return <Urgency04 data={data} />;
    case UrgencyLayouts.FIVE:
      return <Urgency05 data={data} />;
    case UrgencyLayouts.SIX:
      return <Urgency06 data={data} />;

    /**
     * Guarantee Layouts
     */
    case GuaranteeLayouts.ONE:
      return <Guarantee01 data={data} />;
    case GuaranteeLayouts.TWO:
      return <Guarantee02 data={data} />;
    case GuaranteeLayouts.THREE:
      return <Guarantee03 data={data} />;

    /**
     * Quiz Layouts
     */
    case QuizLayouts.ONE:
      return <Quiz01 data={data} />;
    case QuizLayouts.TWO:
      return <Quiz02 data={data} />;

    default:
      return (
        <div
          style={{
            background: "white",
            padding: 40,
            textAlign: "center",
            fontFamily: theme.fontFamily,
          }}
        >
          No Layout To Show
        </div>
      );
  }
};

export default Layout;