import React from 'react';
import PropTypes from 'prop-types';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import HeaderOperatorBaner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
import PrettyLink from "~atoms/pretty-link";
import useTranslate from '~hooks/useTranslate/useTranslate';
import { TrackingKeys } from '~constants/tracking-api'
import { formatDate } from '../../../../../gatsby-core-theme/helpers/lotto';
import styles from './lotto.module.scss';

const WinningNumbers = ({ data, template, operator = null, modulePosition }) => {
  const { balls } = data?.drawDetails || {};
  const imageName = data?.lottery !== 'daily-lotto' ? data?.lottery : 'lotto';

  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}>{`${useTranslate(
            `${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()}
      </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}>
            {useTranslate(`no_winners`, 'There were no winners this week.')}
          </p>
          <PrettyLink
            operator={operator}
            pageTemplate={template}
            moduleName={TrackingKeys?.LOTTO}
            modulePosition={modulePosition}
            rel="nofollow noreferrer sponsored"
            clickedElement='lotto_text'
            >
            <p className={styles.linkCta}>
              {useTranslate(`get_tickets`, 'Get your ticket in for the next draw!')}
            </p>
          </PrettyLink>

        </div>
      </div>
      {operator && (
        <div className={styles.bonusBox}>
          <HeaderOperatorBaner
            operator={operator}
            moduleName={TrackingKeys?.LOTTO}
            modulePosition={modulePosition}
          />
        </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,
  modulePosition: PropTypes.number,
};
