/* eslint-disable camelcase */
import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { getOddsHighlights, getOddsOffersSorted, getTimeByTimeZone } from 'sports-util';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import { imagePrettyUrl, getAltText, prettyTracker } from '~helpers/getters';
import styles from './odds.module.scss';

export default function index({ oddsData, eventDetails, operatorList }) {
  const {
    competition: { name },
    competitors: [homeTeam, awayTeam],
    start_date,
    status,
  } = eventDetails;

  if (!oddsData.odds) {
    return <h1>Loading</h1>;
  }

  const timeZoneStartGame = getTimeByTimeZone(start_date);
  const oddType = '1x2';
  const highlightedOdds = getOddsHighlights(oddsData.odds.slice(0, 4), oddType);
  const checkArrow = (offer) => Number(offer.odds) > Number(offer.odds_old);
  return (
    <div className={styles.oddsContainer}>
      <div className={styles.containerHeader}>
        {status.name !== 'Finished' ? (
          <>
            <div>
              <p>
                {homeTeam.participant.name} vs {awayTeam.participant.name}
              </p>
              <p>{name}</p>
            </div>

            <span className={styles.time}>
              {timeZoneStartGame.getDay().toString().padStart(2, 0)}/
              {timeZoneStartGame.getMonth().toString().padStart(2, 0)} -{' '}
              {timeZoneStartGame.getHours().toString().padStart(2, 0)}:
              {timeZoneStartGame.getMinutes().toString().padStart(2, 0)}
            </span>
          </>
        ) : (
          <p className={styles.matchendedTitle}>Top Sportsbook Bonuses</p>
        )}
      </div>

      {status.name !== 'Finished' && highlightedOdds.length > 0
        ? highlightedOdds.map((item) => {
            const operator = operatorList.filter(
              (x) =>
                // eslint-disable-next-line no-unused-expressions
                x.short_name === item.odds_provider.short_code
            );

            const prettyLink = prettyTracker(operator[0]);
            const imageObject =
              operator[0]?.standardised_logo_url_object || operator[0]?.logo_url_object;

            return (
              <div className={styles.oddsRow}>
                {operator.length > 0 ? (
                  <a
                    href={prettyLink}
                    className={styles.oddsProviderInfo}
                    title={operator?.name}
                    target="_blank"
                    rel="noreferrer"
                  >
                    {imageObject && (
                      <LazyImage
                        alt={getAltText(imageObject, operator?.name)}
                        src={imagePrettyUrl(imageObject?.filename, 40, 40)}
                        width={40}
                        height={40}
                        target="_blank"
                      />
                    )}
                    {operator[0].short_name}
                  </a>
                ) : (
                  <div>{item.odds_provider.short_code}</div>
                )}

                <div className={styles.oddsValues}>
                  {getOddsOffersSorted(item.offers, oddType).map((odd) => (
                    <a
                      href={prettyLink}
                      className={`${styles.cell} ${odd.isHighlighted ? styles.highlighted : ''} ${
                        checkArrow(item.offers) ? styles.up : styles.down
                      }`}
                      title={operator?.name}
                      target="_blank"
                      rel="noreferrer"
                    >
                      <span className={styles.offerType}>{odd.offer_type}</span>
                      {odd.odds}
                    </a>
                  ))}
                </div>
              </div>
            );
          })
        : operatorList.slice(0, 4).map((operator) => {
            const prettyLink = prettyTracker(operator);
            const imageObject = operator?.standardised_logo_url_object || operator?.logo_url_object;
            return (
              <div className={styles.oddsRow}>
                <a
                  href={prettyLink}
                  className={styles.oddsProviderInfo}
                  title={operator?.name}
                  target="_blank"
                  rel="noreferrer"
                >
                  <LazyImage
                    alt={getAltText(imageObject, operator?.name)}
                    src={imagePrettyUrl(imageObject?.filename || operator?.logo_url, 40, 40)}
                    width={40}
                    height={40}
                    target="_blank"
                  />
                  {operator.short_name}
                </a>
                <div className={styles.operatorCta}>
                  {/* <span>{operator[0].bonus.one_liners.main.one_liner}</span> */}
                  <span>Bet £10 & Get £50 Free Bets</span>
                  <OperatorCta playText="Bet Now" translationKey="bet_now" operator={operator} />
                </div>
              </div>
            );
          })}
    </div>
  );
}
