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,
  formatDate,
} from '../../../../../gatsby-core-theme/helpers/lotto';
import styles from './rollover.module.scss';

const Rollover = ({ data, lotteryName, operator = null, template }) => {
  let { rolloverAmount, totalSales, estimatedJackpot, totalPrizePool } = data?.more_info || {};
  const { rolloverNumber } = data?.more_info || {};
  const drawMachine = data?.drawDetails?.drawMachine;
  const nextDrawDate = data?.nextDrawDate;
  const ctaText = getLottoCtas(lotteryName, 'rollover');

  rolloverAmount = `R${commaSeperate(parseFloat(rolloverAmount))}`;
  totalPrizePool = `R${commaSeperate(parseFloat(totalPrizePool))}`;
  totalSales = `R${commaSeperate(parseFloat(totalSales))}`;
  estimatedJackpot = `R${commaSeperate(parseFloat(estimatedJackpot))}`;

  const rows = [
    {
      title: 'Rollover amount for next draw:',
      value: rolloverAmount,
    },
    {
      title: 'This is rollover number:',
      value: rolloverNumber,
    },
    {
      title: 'Draw Machine:',
      value: drawMachine,
      redColor: true,
    },
    {
      title: 'Total prize pool for this draw:',
      value: totalPrizePool,
    },
    {
      title: 'Total sales:',
      value: totalSales,
    },
    {
      title: 'Next Estimated Jackpot:',
      value: estimatedJackpot,
      redColor: true,
    },
    {
      title: 'Next Draw Date:',
      value: formatDate(nextDrawDate),
    },
  ];

  return (
    <div className={styles.rolloverContainer}>
      {rows.map((item) => (
        <div key={keygen()} className={`${styles.rollover} ${item.redColor && styles.red}`}>
          <p>{item.title}</p>
          <h2>{item.value}</h2>
        </div>
      ))}
      {operator && (
        <div className={styles.buttonContainer}>
          <OperatorCta
            module="lotto"
            operator={operator}
            pageTemplate={template}
            translationsObj={{
              active: {
                translationKey: `${lotteryName}_rollover`,
                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 Rollover;

Rollover.propTypes = {
  data: PropTypes.shape({
    more_info: PropTypes.shape({}),
    drawDetails: PropTypes.shape({
      drawMachine: PropTypes.string,
    }),
    nextDrawDate: PropTypes.string,
  }),
  lotteryName: PropTypes.string,
  operator: PropTypes.shape({}),
  template: PropTypes.string,
};
