import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';

// import loadable from '@loadable/component';
import styles from './header.module.scss';
import Breadcrumbs from '~atoms/breadcrumbs';
import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';

// eslint-disable-next-line import/no-named-as-default
import Image from '../../../hooks/gatsby-img';

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

function Header({ section, content = null, backgroundImage = true, showAuthor = true }) {
  const { header } = section.page.sections;
  const backgroundImageValue = section.page.sections?.header?.extra_fields?.header_background_image;
  const uploadedBg = imagePrettyUrl(backgroundImageValue);

  let backgroundImg = (
    <div className={styles.bgImage}>
      <Image filename="headerBackground.png" alt="header" />
    </div>
  );
  if (backgroundImageValue) {
    backgroundImg = <img src={uploadedBg} alt="header" className={styles.headerImage} />;
  }

  const headerContent = () => {
    if (content) {
      return content;
    }

    const headerText = getSectionExtraField(null, header, 'header_text');
    const innerBannerHTML = () => {
      const formatInnerHTML = {
        __html: headerText,
      };
      return formatInnerHTML;
    };

    return <div dangerouslySetInnerHTML={innerBannerHTML()} />;
  };

  const Author =
    section.page.path !== '/' &&
    section.page.path !== 'contact-us' &&
    section.page.path !== 'sitemap' &&
    section.page.author &&
    showAuthor
      ? lazy(() => import('~atoms/author'))
      : null;

  return (
    <header className={styles.header || ''}>
      {backgroundImage && backgroundImg}
      <div
        className={`${styles.headerContent || ''} ${styles[section.page.template] || ''} ${
          (!content && styles.default) || ''
        }`}
      >
        <div className={styles.topSection || ''}>
          {section.page.path && <Breadcrumbs markets={section.allMarkets} page={section.page} />}
          {Author && (
            <div className={styles.authorContainer || ''}>
              <Suspense fallback={<></>}>
                <Author
                  authorImg={section.page?.author?.image}
                  link={section.page?.author?.profile_page_path}
                  name={section.page.author?.name}
                  date={section.page.updated_at ? section.page.updated_at : section.page.created_at}
                  readingTime={section.page.reading_time}
                  reviewer={section?.page.reviewer_id && section?.page?.reviewer}
                />
              </Suspense>
            </div>
          )}
        </div>

        {section.page.template !== 'author' &&
          !['article', 'game'].includes(section.page.relation_type) && (
            <div>
              <h1>{section.page.title}</h1>
              <span>{section.page?.relation?.url}</span>
              <span>{section.page?.relation?.email}</span>
            </div>
          )}
        <div className={!content && (styles.headerText || '')}>{headerContent()}</div>
      </div>
    </header>
  );
}

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

export default Header;
