import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import { prettyTracker, translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import { formatDate } from '../../../../../gatsby-core-theme/helpers/lotto';
import styles from './lotto.module.scss';

const WinningNumbers = ({ data, template, operator = null }) => {
  const { translations } = useContext(Context) || {};

  const { balls } = data?.drawDetails || {};
  const imageName = data?.lottery !== 'daily-lotto' ? data?.lottery : 'lotto';
  const prettyLink = prettyTracker(operator, 'main', false, template);

  const getWinningNumbers = () => (
    <ul className={styles.numbersWrapper}>
      {Object.entries(balls).map((value) => (
        <li
          key={keygen()}
          className={`${styles.number} ${value[0] === 'bonus' ? styles.bonusBall : ''}`}
        >
          {value[1]}
        </li>
      ))}
    </ul>
  );
  const prettyLabel = (label) => {
    const upperCase = label?.charAt(0)?.toUpperCase() + label?.slice(1);
    return upperCase && upperCase.replaceAll('-', ' ');
  };

  return (
    <div className={styles.lottoContainer}>
      <div className={styles.body}>
        <p className={styles.rowTitle}>
          <span className={styles.region}>{`${translate(
            translations,
            `${data.lottery}_country`,
            'South Africa'
          )} - ${prettyLabel(data?.lottery)}`}</span>
          <span className={styles.date}>{formatDate(data?.drawDate)}</span>
        </p>
        <div className={styles.imgContainer}>
          <img
            src={`../../../../../images/${imageName}.png`}
            alt={`${data?.lottery}-lottery`}
            width={167}
            height={57}
          />
        </div>
        {getWinningNumbers()}
        {operator && (
          <div className={styles.btnContainer}>
            <OperatorCta
              module="lotto"
              operator={operator}
              pageTemplate={template}
              translationsObj={{
                active: { translationKey: 'play_now', defaultValue: 'Play Now' },
                not_recommended: {
                  translationKey: 'not_recommended',
                  defaultValue: 'Not Recommended',
                },
                coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
                inactive: { translationKey: 'inactive', defaultValue: 'Not Accepting New Players' },
                blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
              }}
            />
          </div>
        )}
      </div>
      <div className={styles.informationBlock}>
        <div className={styles.logoContainer}>
          <img width={20} height={20} alt="trophy" src="../../../../../images/trophy.png" />
        </div>
        <div className={styles.infoText}>
          <p className={styles.label}>
            {translate(translations, `no_winners`, 'There were no winners this week.')}
          </p>
          <a target="_blank" href={prettyLink} rel="nofollow noreferrer sponsored">
            <p className={styles.linkCta}>
              {translate(translations, `get_tickets`, 'Get your ticket in for the next draw!')}
            </p>
          </a>
        </div>
      </div>
    </div>
  );
};

export default WinningNumbers;

WinningNumbers.propTypes = {
  data: PropTypes.shape({
    drawDetails: PropTypes.shape({}),
    lottery: PropTypes.string,
    drawDate: PropTypes.string,
  }),
  operator: PropTypes.shape({}),
  template: PropTypes.string,
};
