/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
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 styles from './header.module.scss';

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

    case 'sport': {
      let props = {
        page: section.page,
        extraFields: section.page.extra_fields,
      };

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

      return <ModuleComponent {...props} page={section.page} />;
    }

    case 'author': {
      if (!section.page.relation) {
        return <></>;
      }

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

          return (
            <ModuleComponent author={section.page.relation} authorTitle={section?.page?.title} />
          );
        case 'template_one':
        default:
          ModuleComponent = loadable(() =>
            import('../../../../components/molecules/header/variants/author/template-one')
          );
          return (
            <ModuleComponent author={section.page.relation} authorTitle={section?.page?.title} />
          );
      }
    }
    case 'page': {
      let props = {
        page: section.page,
        extraFields: section.page.extra_fields,
        imageObj: section.page.featured_image_object,
      };

      if (section?.page?.page_styles?.short_name === 'template_two') {
        ModuleComponent = loadable(() =>
          import('../../../../components/molecules/header/variants/default/template-two')
        );
      } else {
        ModuleComponent = loadable(() =>
          import('../../../../components/molecules/header/variants/default/template-one')
        );
        props = {
          ...props,
          title: section.page.title,
          description:
            section.page.description ||
            getSectionExtraField(null, section.page.sections.header, 'header_text'),
        };
      }
      return <ModuleComponent {...props} />;
    }
    default:
      return ModuleComponent;
  }
};

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

  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} />}
      {relationContent(section, numOfStarsRating)}
    </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,
      page_styles: PropTypes.shape({
        short_name: PropTypes.string,
      }),
      author: PropTypes.shape({
        name: PropTypes.string,
        profile_page_path: PropTypes.string,
      }),
      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({
            style: PropTypes.string,
          }),
        }),
      }),
      title: PropTypes.string,
      reading_time: PropTypes.string,
      reviewer_id: PropTypes.string,
      reviewer: PropTypes.shape({}),
    }),
  }).isRequired,
  numOfStarsRating: PropTypes.number,
};
