import React from 'react';
import PropTypes from 'prop-types';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import {
  commaSeperate,
  getLottoCtas,
  getLottoLabels,
} from '../../../../../gatsby-core-theme/helpers/lotto';
import styles from './lotto-table.module.scss';

const LottoTable = ({ data, lotteryName, operator = null, template }) => {
  const ctaText = getLottoCtas(lotteryName, 'lottoTable');
  const { divs } = data?.drawDetails || {};
  const splitIndex = divs && Math.ceil(Object.values(divs).length / 2);
  const divArr1 = divs ? Object.values(divs).slice(0, splitIndex) : [];
  const divArr2 = divs ? Object.values(divs).slice(splitIndex, divs.length) : [];

  const labels = getLottoLabels(lotteryName);

  return (
    <div className={styles.tableWrapper}>
      <div className={styles.firstBox}>
        {divArr1?.map((div, index) => {
          const hasWinners = Number(div?.winners);

          return (
            <div key={keygen()} className={styles.tableRow}>
              <p className={styles.labelName}>{labels[index]?.title}</p>
              <p className={styles.tableValue}>{`${div?.winners} Winners ${
                hasWinners ? `- R${commaSeperate(parseFloat(div?.payout))}` : ''
              }`}</p>
            </div>
          );
        })}
      </div>
      <div className={styles.secondBox}>
        {divArr2?.map((div, index) => {
          const hasWinners = Number(div?.winners);

          return (
            <div key={keygen()} className={styles.tableRow}>
              <p className={styles.labelName}>{labels[index + splitIndex]?.title}</p>
              <p className={styles.tableValue}>
                {`${div?.winners} Winners ${
                  hasWinners ? `- R${commaSeperate(parseFloat(div?.payout))}` : ''
                }`}
              </p>
            </div>
          );
        })}
      </div>
      {operator && (
        <div className={styles.btnContainer}>
          <OperatorCta
            operator={operator}
            pageTemplate={template}
            module="lotto"
            translationsObj={{
              active: {
                translationKey: `${lotteryName}_lottoTable`,
                defaultValue: ctaText || 'Visit',
              },
              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>
  );
};

export default LottoTable;

LottoTable.propTypes = {
  data: PropTypes.shape({
    drawDetails: PropTypes.shape({}),
  }),
  lotteryName: PropTypes.string,
  operator: PropTypes.shape({}),
  template: PropTypes.string,
};
