import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
import { translate, getAltText, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';

import styles from './header-operator-bannner.module.scss';

const HeaderOperatorBaner = ({
  operator,
  logo,
  buttonType = 'primary',
  template,
  module = 'header_operator',
}) => {
  const { translations } = useContext(Context) || {};

  let main;

  if (['coming_soon', 'inactive'].includes(operator?.status)) {
    main = (
      <p className={styles[operator?.status] || ''}>
        {translate(translations, operator?.status, operator?.status.replace('_', ' '))}
      </p>
    );
  } else if (operator?.status === 'active' || operator?.status === 'not_recommended') {
    main = (
      <>
        <Bonus module={module} ctaBtn item={operator} tracker="main" buttonType={buttonType} />
      </>
    );
  }

  const trackerLinkActive = () => {
    if (!operator || !operator?.links) {
      return false;
    }

    return operator?.links[template] || operator?.links?.main;
  };

  return (
    trackerLinkActive() && (
      <div className={`${styles.operatorBanner}`}>
        {logo?.filename && (
          <LazyImage
            loading="eager"
            src={imagePrettyUrl(logo?.filename, 64, 64)}
            width={64}
            height={64}
            alt={getAltText(logo, operator?.name)}
          />
        )}
        {main}
      </div>
    )
  );
};

HeaderOperatorBaner.propTypes = {
  operator: PropTypes.shape({
    name: PropTypes.string,
    type: PropTypes.string,
    template: PropTypes.string,
    links: PropTypes.shape({
      main: PropTypes.string,
    }),
    status: PropTypes.string,
  }),
  logo: PropTypes.shape({
    filename: PropTypes.string,
  }),
  template: PropTypes.string,
  buttonType: PropTypes.string,
  module: PropTypes.string,
};

export default HeaderOperatorBaner;
