/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React, { useContext, lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
import DefaulTemplateTwo from '../../../../components/molecules/header/variants/default/template-two';
import DefaulTemplateOne from '../../../../components/molecules/header/variants/default/template-one';
import ReviewCredits from '../../../../components/atoms/review-credits';
import Author from '~atoms/author';
import styles from './header.module.scss';

export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
  const { bannerIsActive } = useContext(Context) || {};
  const customStyles = section.page.path === '/' ? 'homepage' : section.page.path.replace('/', '-');

  const relationContent = (pageSection, starratings) => {
    let ModuleComponent = null;
    switch (pageSection?.page?.relation_type) {
      case 'payment_method': {
        const data = {
          page: pageSection?.page,
          relation: pageSection?.page?.relation || {},
          type: pageSection?.page?.relation_type,
          template: pageSection?.page?.page_styles?.short_name,
          pageTemplate: pageSection?.page?.template,
          pageSections: pageSection?.page?.pageSections,
          name: pageSection?.page?.title || pageSection?.page?.relation?.name,
          ribbons: pageSection?.page?.relation?.ribbons || [],
          image:
            pageSection?.page?.relation?.standardised_logo_filename_object ||
            pageSection?.page?.relation?.logo_filename_object,
          numOfStars: 5,
          description:
            pageSection.page.description ||
            getSectionExtraField(null, pageSection.page.sections.header, 'header_text'),
        };
        switch (pageSection?.page?.page_styles?.short_name) {
          case 'template_two': {
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/payment/template-two/index')
            );
            return <ModuleComponent {...data} />;
          }
          case 'template_four': {
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/payment/template-four/index')
            );
            return <ModuleComponent {...data} />;
          }
          case 'template_five': {
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/payment/template-five/index')
            );
            return <ModuleComponent {...data} />;
          }
          default: {
            ModuleComponent = lazy(() =>
              import(
                '../../../../components/molecules/header/variants/payment/template-one-three/index'
              )
            );
            return <ModuleComponent {...data} />;
          }
        }
      }
      case 'software_provider': {
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/software')
        );
        return <ModuleComponent page={pageSection.page} />;
      }
      case 'article': {
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/article')
        );
        return <ModuleComponent page={pageSection.page} />;
      }
      case 'operator': {
        const data = {
          page: pageSection?.page,
          author: pageSection?.page.author,
          type: pageSection?.page?.relation_type,
          template: pageSection?.page?.page_styles?.short_name,
          pageTemplate: pageSection?.page?.template,
          relation: pageSection?.page?.relation || {},
          name: pageSection?.page?.title || pageSection?.page?.relation?.name,
          ribbons: pageSection?.page?.relation?.ribbons || [],
          image:
            pageSection?.page?.relation?.standardised_logo_url_object ||
            pageSection?.page?.relation?.logo_url_object,
          featureImg: pageSection?.page?.featured_image_object,
          extraFields: pageSection?.page?.extra_fields || {},
          numOfStars: starratings,
        };
        switch (pageSection?.page?.page_styles?.short_name) {
          case 'template_three': {
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/operator/template-three')
            );
            return <ModuleComponent {...data} />;
          }
          case 'template_four': {
            ModuleComponent = lazy(() =>
              import(
                '../../../../components/molecules/header/variants/operator/template-four/index'
              )
            );
            return <ModuleComponent {...data} />;
          }
          case 'template_five': {
            ModuleComponent = lazy(() =>
              import(
                '../../../../components/molecules/header/variants/operator/template-five/index'
              )
            );
            return <ModuleComponent {...data} />;
          }
          default: {
            ModuleComponent = lazy(() =>
              import(
                '../../../../components/molecules/header/variants/operator/template-one-two/index'
              )
            );
            return <ModuleComponent {...data} />;
          }
        }
      }
      case 'game': {
        switch (pageSection?.page?.page_styles?.short_name) {
          case 'template_two': {
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/slot/template-two')
            );
            return (
              <ModuleComponent page={pageSection.page} image="../../../../images/verify.svg" />
            );
          }
          default: {
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/slot/template-one')
            );
            return (
              <ModuleComponent page={pageSection.page} image="../../../../images/verify.svg" />
            );
          }
        }
      }
      case 'sport': {
        let props = {
          page: pageSection.page,
          extraFields: pageSection.page.extra_fields,
        };

        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/sport/template-one/index')
        );
        props = {
          ...props,
          title: pageSection.page.title,
          description:
            pageSection.page.description ||
            getSectionExtraField(null, pageSection.page.pageSections.header, 'header_text'),
        };

        return <ModuleComponent {...props} page={pageSection.page} />;
      }
      case 'author': {
        if (!pageSection.page.relation) {
          return <></>;
        }

        switch (pageSection?.page?.page_styles?.short_name) {
          case 'template_two':
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/author/template-two')
            );
            return (
              <ModuleComponent
                author={pageSection.page.relation}
                authorTitle={pageSection?.page?.title}
              />
            );
          case 'template_three':
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/author/template-three')
            );
            return (
              <ModuleComponent
                author={pageSection.page.relation}
                authorTitle={pageSection?.page?.title}
              />
            );
          case 'template_four':
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/author/template-four')
            );

            return (
              <ModuleComponent
                author={pageSection.page.relation}
                authorTitle={pageSection?.page?.title}
              />
            );
          case 'template_one':
          default:
            ModuleComponent = lazy(() =>
              import('../../../../components/molecules/header/variants/author/template-one')
            );
            return (
              <ModuleComponent
                author={pageSection.page.relation}
                authorTitle={pageSection?.page?.title}
              />
            );
        }
      }
      default:
        return ModuleComponent;
    }
  };

  const getDefaultHeader = () => {
    let props = {
      page: section.page,
      extraFields: section.page.extra_fields,
      imageObj: section.page.featured_image_object,
    };
    let ModuleComponent = null;

    if (section?.page?.page_styles?.short_name === 'template_two') {
      ModuleComponent = DefaulTemplateTwo;
    } else {
      ModuleComponent = DefaulTemplateOne;
      props = {
        ...props,
        title: section.page.title,
        description:
          section.page.description ||
          getSectionExtraField(null, section.page.sections.header, 'header_text'),
      };
    }
    return <ModuleComponent {...props} />;
  };

  const { page } = section || {};
  const { sections } = page || {};
  const isContactUsPage = !!sections?.main?.modules?.filter(
    (module) => module.name === 'contact_form'
  ).length;

  const showReviewCredits =
    section.page.path !== '/' &&
    !isContactUsPage &&
    section.page.path !== 'news' &&
    section.page.path !== 'sitemap' &&
    section.page.template !== 'ppc' &&
    section.page.author_id &&
    showAuthor;

  const showAuthorComponent =
    section.page.path !== '/' &&
    !isContactUsPage &&
    section.page.path !== 'news' &&
    section.page.path !== 'sitemap' &&
    section.page.template !== 'ppc' &&
    section.page.author_id &&
    showAuthor;

  const useReviewCredits =
    process.env.GATSBY_SITE_NAME === 'irishluck.ie' ||
    process.env.GATSBY_SITE_NAME === 'demosite' ||
    process.env.GATSBY_SITE_NAME === 'playcasino.co.za';

  const hasAuthorBox = !!(page.author_id && !isContactUsPage);

  const date =
    page.manual_updated_date || page.manual_published_date
      ? page.manual_updated_date || page.manual_published_date
      : '';

  const skeletonClassName = `skeleton${section?.page?.relation_type}`;

  return (
    <header
      className={`${styles?.header || ''} 
        ${styles[section.page.template] ? styles[section.page.template] || '' : ''}
        ${styles[section.page.relation_type] ? styles[section.page.relation_type] || '' : ''}
        ${
          section?.page?.page_styles && styles[section?.page?.page_styles?.short_name]
            ? styles[section?.page?.page_styles?.short_name] || ''
            : ''
        } 
        ${bannerIsActive && styles.bannerIsActive ? styles.bannerIsActive : ''}
        ${styles[customStyles] ? styles[customStyles] || '' : ''}
        `}
    >
      {section.page.path && <Breadcrumbs markets={section.allMarkets} page={section.page} />}
      {section?.page?.relation_type === 'page' ? (
        getDefaultHeader()
      ) : (
        <Suspense fallback={<div className={`${styles[skeletonClassName]}`} />}>
          {relationContent(section, numOfStarsRating)}
        </Suspense>
      )}

      {useReviewCredits
        ? showReviewCredits && (
            <ReviewCredits
              date={date}
              author={page?.author_id && page?.author}
              readingTime={page.reading_time}
              reviewer={page.reviewer_id && page?.reviewer}
              hasAuthorBox={hasAuthorBox}
              type={page?.template}
            />
          )
        : showAuthorComponent && (
            <Author
              name={page.author?.name}
              date={date}
              type={page?.template}
              authorImg={page?.author?.image}
              readingTime={page.reading_time}
              link={page?.author?.profile_page_path}
              reviewer={page.reviewer_id && page?.reviewer}
              hasAuthorBox={hasAuthorBox}
              headerOffset={174}
            />
          )}
    </header>
  );
}

Header.propTypes = {
  section: PropTypes.shape({
    allMarkets: PropTypes.shape([PropTypes.shape({})]),
    page: PropTypes.shape({
      relation_type: PropTypes.string,
      template: PropTypes.string,
      path: PropTypes.string,
      updated_at: PropTypes.string,
      created_at: PropTypes.string,
      description: PropTypes.string,
      featured_image_object: PropTypes.object,
      extra_fields: PropTypes.object,
      page_styles: PropTypes.shape({
        short_name: PropTypes.string,
      }),
      author: PropTypes.shape({
        name: PropTypes.string,
        profile_page_path: PropTypes.string,
      }),
      author_id: PropTypes.number,
      sections: PropTypes.shape({
        header: PropTypes.shape({
          extra_fields: PropTypes.shape({
            header_background_image: PropTypes.oneOfType([
              PropTypes.string,
              PropTypes.shape({
                value: PropTypes.string,
                type: PropTypes.string,
              }),
            ]),
            header_text: PropTypes.oneOfType([
              PropTypes.string,
              PropTypes.shape({
                value: PropTypes.string,
                type: PropTypes.string,
              }),
            ]),
          }),
        }),
        main: PropTypes.shape({
          modules: PropTypes.shape({
            name: PropTypes.string,
            style: PropTypes.string,
          }),
        }),
      }),
      title: PropTypes.string,
      reading_time: PropTypes.string,
      reviewer_id: PropTypes.string,
      reviewer: PropTypes.shape({}),
    }),
  }).isRequired,
  numOfStarsRating: PropTypes.number,
  showAuthor: PropTypes.bool,
};
