/* eslint-disable react/no-unused-prop-types */
/* eslint-disable import/no-unresolved */
/* eslint-disable import/extensions */
/* eslint-disable import/no-extraneous-dependencies */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import Image from 'gatsby-core-theme/src/hooks/gatsby-img';
import styles from './header.module.scss';
import Breadcrumbs from '~atoms/breadcrumbs';
import { isSearchPath } from '~helpers/isSearchPath';

/* eslint-disable camelcase, react/no-danger */

// eslint-disable-next-line react/prop-types
function Header({ section, content = null, serverData }) {
  const skeletonClassName = `skeleton${section?.page?.relation_type}`;

  const headerContent = () => {
    let ModuleComponent = null;
    switch (section?.page?.template) {
      case 'event': {
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/event')
        );
        return <ModuleComponent page={section.page} serverData={serverData} />;
      }
      case 'tournament': {
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/tournament')
        );
        return <ModuleComponent page={section.page} />;
      }
      case 'sportsbook':
      case 'operator_review': {
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/operator')
        );
        return <ModuleComponent {...section.page} />;
      }
      case 'contact_us': {
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/contact-us/index')
        );
        return <ModuleComponent page={section.page} />;
      }
      default:
        ModuleComponent = lazy(() =>
          import('../../../../components/molecules/header/variants/default')
        );
        return <ModuleComponent page={section.page} />;
    }
  };

  const customStyles = section.page.path === '/' ? 'homepage' : section.page.path.replace('/', '-');
  const isSearch = isSearchPath(section.allMarkets, section.page.path);

  const isContactUs = section?.page?.template === 'contact_us';

  return (
    !isSearch && (
      <>
        <header
          className={`${styles.header} ${styles[section.page.template]} ${
            styles[customStyles] ? styles[customStyles] || '' : ''
          }
        `}
        >
          {(['event', 'homepage', 'sportsbook'].includes(section.page.template) ||
            ['homepage'].includes(customStyles)) && (
            <Image
              filename="Left.png"
              alt="Header Left Icon"
              className={styles.leftIcon}
              height="153px"
              width="133px"
            />
          )}

          {section.page.path && !isContactUs && (
            <div className={styles.breadcrumbContainer}>
              <Breadcrumbs page={section.page} />
            </div>
          )}
          <div
            className={`${styles.headerContent} ${styles[section.page.template]} ${
              !content && styles.default
            }`}
          >
            <Suspense fallback={<div className={`${styles[skeletonClassName]}`} />}>
              {headerContent()}
            </Suspense>
          </div>
          {(['event', 'homepage', 'sportsbook'].includes(section.page.template) ||
            ['homepage'].includes(customStyles)) && (
            <Image
              filename="Right.png"
              alt="Header Right Icon"
              className={styles.rightIcon}
              height="153px"
              width="133px"
            />
          )}
        </header>
      </>
    )
  );
}

Header.propTypes = {
  content: PropTypes.element,
  section: PropTypes.shape({
    page: PropTypes.shape({
      template: PropTypes.string,
      path: PropTypes.string,
      updated_at: PropTypes.string,
      created_at: PropTypes.string,
      reading_time: PropTypes.string,
      relation_type: PropTypes.string,
      reviewer: PropTypes.string,
      reviewer_id: PropTypes.number,
      author: PropTypes.shape({
        name: PropTypes.string,
        profile_page_path: PropTypes.string,
      }),
      authors: PropTypes.shape([PropTypes.shape({})]),
      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,
              }),
            ]),
          }),
        }),
      }),
      title: PropTypes.string,
    }),
    allMarkets: PropTypes.shape({}),
  }).isRequired,
  backgroundImage: PropTypes.bool,
};

export default Header;
