import React, {useState} from 'react';
import PropTypes from 'prop-types';
import Tabs from 'gatsby-core-theme/src/hooks/tabs';
import WinningNumbers from './winning-numbers';
import Rollover from './rollover';
import LottoTable from './lotto-table';
import { getApiBasedNames } from '../../../../gatsby-core-theme/helpers/lotto';
import { getResultsById } from '../../../../gatsby-core-theme/helpers/services';
import styles from './lotto-module.module.scss';

const LottoModule = ({ serverData, page, module, modulePosition }) => {
  const { template, extra_fields: extraFields } = page || {};
  const { name: moduleName } = module;
  const { operator } = extraFields || {};
  const { latestDrawResults, reorderedDates } = serverData;

  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const monthsOfYear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',];

  const [tabData, setTabData] = useState(latestDrawResults);

  const onTabChange = async (tabId) => {
    const apiBaseNames = getApiBasedNames(moduleName);
    const idIndex = moduleName === 'daily_lotto' ? 2 : 1;
    // eslint-disable-next-line no-underscore-dangle
    const lottoId = reorderedDates[tabId.split('_')[1]]._id.split('-')[idIndex];

    setTabData(await Promise.all(
      apiBaseNames.map((name) => getResultsById(`${name}-${lottoId}`))
    ));
  }

  return (
    <Tabs
    showAll={false}
    showNumberOfResults
    headerClass="sportstakeTabs"
    activeTabClass='sportstakeTabsActive'
    onTabChange={onTabChange}
    activeIndex={0}
    >
      {reorderedDates && reorderedDates.map((date, index) => {
        const label = (index === 0) ? 'Latest' : daysOfWeek[new Date(date.drawDate).getDay()];
        const results = `${monthsOfYear[new Date(date.drawDate).getMonth()]} ${new Date(
            date.drawDate
            ).getDate()}`;

        return(
          <div label={label} results={results} key={tabData} className={`${styles.sportstake}`}>
            {tabData &&
              tabData.map((draw) => (
                <div className={styles.row}>
                  <WinningNumbers
                    data={draw}
                    lotteryName={draw.lottery}
                    template={template}
                    operator={operator}
                    modulePosition={modulePosition}
                  />
                  <Rollover data={draw} lotteryName={draw.lottery} template={template} />
                  <LottoTable data={draw} lotteryName={draw.lottery} template={template} />
                </div>
              ))}
          </div>
        )
        })}
    </Tabs>
  );
};

export default LottoModule;

LottoModule.propTypes = {
  page: PropTypes.shape({
    template: PropTypes.string,
    extra_fields: PropTypes.shape({
      operator: PropTypes.shape({}),
    }),
  }),
  serverData: PropTypes.shape({
    reorderedDates: PropTypes.arrayOf(PropTypes.shape({})),
    latestDrawResults: PropTypes.arrayOf(PropTypes.shape({}))
  }),
  module: PropTypes.shape({
    name: PropTypes.string
  }),
  modulePosition: PropTypes.number,
};
