import React from 'react';
import { NextPage } from 'next';

import { HeaderData, HomePageData } from '../typings/entities';
import Hero from '../components/main/homepage/Hero';
import Why from '../components/main/Why';
import Offers, { convertOffer } from '../components/main/Offers';
import How from '../components/main/How';
import FAQ from '../components/main/FAQ';
import BlockCTA from '../components/shared/BlockCTA';
import { getHomepage } from '../prismic/api';
import Review from '../components/main/homepage/Review';
import { Header } from '../components/main/Header';
import RichText from '../components/RichText';

interface PageProps {
  homepage?: HomePageData;
  header?: HeaderData;
  error?: boolean;
  namespacesRequired?: string[];
}

const Home: NextPage<PageProps> = ({ homepage, header }) => {
  const {
    hero_title,
    hero_tagline,
    hero_cta_label,
    hero_cta_link,
    hero_tip,
    why_title,
    why_perks,
    first_offer,
    second_offer,
    third_offer,
    offers_title,
    offers_find_cta_label,
    offers_find_cta_link,
    how_it_works_title,
    how_it_works_steps,
    review_title,
    review_short_description,
    review_main_video_id,
    review_main_video_illustration,
    review_tagline,
    faq_title,
    faq_questions,
    faq_link,
    video_reviews,
    reviews,
    bottom_cta_title,
    bottom_cta_tagline,
    bottom_cta_contact_label,
    bottom_cta_funnel_label,
    bottom_cta_funnel_link
  } = homepage;

  return (
    <>
      <Header {...header} />
      <Hero
        title={hero_title}
        tagline={hero_tagline}
        ctaLabel={hero_cta_label}
        ctaLink={hero_cta_link}
        tip={hero_tip} />
      <Why
        title={why_title}
        items={why_perks} />
      <Offers
        title={offers_title}
        offers={
          [first_offer, second_offer, third_offer].filter((offer) => !!offer?.data)
            .map((offer) => convertOffer(offer))
        }
        CTAFindLabel={offers_find_cta_label}
        CATFindLink={offers_find_cta_link}
        CTAButtonColor="yellow"
      />
      <How title={how_it_works_title} steps={how_it_works_steps} />
      <Review
        title={review_title}
        description={review_short_description}
        mainVideo={{ id: review_main_video_id, illustration: review_main_video_illustration }}
        tagline={review_tagline}
        videoReviews={video_reviews}
        textualReviews={reviews}
      />
      <FAQ
        title={faq_title}
        items={faq_questions.map(({ faq_question_title, faq_question_answer }) => (
          { title: faq_question_title, answer: <RichText content={faq_question_answer} /> }
        ))}
        link={faq_link}
      />
      <BlockCTA
        title={bottom_cta_title}
        tagline={bottom_cta_tagline}
        contactLabel={bottom_cta_contact_label}
        funnelLabel={bottom_cta_funnel_label}
        CTALink={bottom_cta_funnel_link}
      />
    </>
  );
};

(Home as any).getInitialProps = async ({ req }): Promise<PageProps> => {
  try {
    const homepage = await getHomepage(req);
    return {
      homepage: homepage.data,
      namespacesRequired: ['common', 'header']
    };
  } catch (err) {
    return {
      error: true,
      namespacesRequired: ['common', 'header']
    };
  }
};

export default Home;