/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { groupBy, formatDate, getHighestOdds } from 'sports-util';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl, getAltText, prettyTracker } from '~helpers/getters';
import styles from './schedule.module.scss';

export const TeamDefImg = ({ alt = '' }) => (
  <img alt={alt} src="../../../../../images/default.svg" width={136} height={136} />
);

export default function Schedule({ serverData, page }) {
  const events = groupBy(serverData.events, 'day');

  const checkArrow = (offer) => Number(offer.odds) > Number(offer.odds_old);
  const operatorList =
    page.sections.header &&
    page.sections.header.modules &&
    page.sections.header.modules.length > 0 &&
    page.sections.header.modules[0].name === 'top_list'
      ? page.sections.header.modules[0].items[0].items
      : [];

  const team = (teamDetails) => (
    <div className={styles.team}>
      <LazyImage
        src={`https://di0up76ym3ymc.cloudfront.net/logos/team/${teamDetails.participant.id}.png`}
        alt={teamDetails.name}
        width={20}
        height={20}
        loading="eager"
        defaultImg={<TeamDefImg alt={teamDetails.name} />}
      />
      <p>{teamDetails.participant.name}</p>
    </div>
  );

  return (
    <div>
      <h2>Round</h2>
      {Object.keys(events).map((key) => (
        <div className={styles.oddsContainer}>
          <div className={styles.containerHeader}>
            <span>{formatDate(events[key][0].start_date, 'round_data', true)}</span>
            <div>1x2</div>
          </div>
          {events[key].map((event) => {
            if (event.odds) {
              const highestOdds = getHighestOdds(event.odds, '1x2');
              return (
                <div className={styles.eventContainer}>
                  <span>{formatDate(event.start_date, 'schedule_data', true)}</span>
                  <div className={styles.name}>
                    {team(event.competitors[0])}
                    {team(event.competitors[1])}
                  </div>
                  <div className={styles.odds}>
                    {highestOdds.map((item) => {
                      const operator = operatorList.filter(
                        (x) =>
                          // eslint-disable-next-line no-unused-expressions
                          x.short_name === item.odds_provider.short_code
                      );

                      const prettyLink = prettyTracker(operator[0]);
                      const imageObject =
                        operator[0]?.standardised_logo_url_object || operator[0]?.logo_url_object;

                      return (
                        <span className={checkArrow(item.offers) ? styles.up : styles.down}>
                          {imageObject && (
                            <a
                              href={prettyLink}
                              className={styles.oddsProviderInfo}
                              title={operator?.name}
                              target="_blank"
                              rel="noreferrer"
                            >
                              <LazyImage
                                alt={getAltText(imageObject, operator?.name)}
                                src={imagePrettyUrl(imageObject?.filename, 40, 40)}
                                width={40}
                                height={40}
                                target="_blank"
                              />
                            </a>
                          )}
                          <span className={styles.offerType}>{item.offers.offer_type}</span>
                          <span>{item.offers.odds}</span>
                        </span>
                      );
                    })}
                  </div>
                </div>
              );
            }
            return <></>;
          })}
        </div>
      ))}
    </div>
  );
}

Schedule.propTypes = {
  page: PropTypes.shape({
    sections: PropTypes.shape({
      header: PropTypes.shape({
        extra_fields: PropTypes.shape({
          header_background_image: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.shape({
              value: PropTypes.string,
              type: PropTypes.string,
            }),
          ]),
          header_text: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.shape({
              value: PropTypes.string,
              type: PropTypes.string,
            }),
          ]),
        }),
      }),
    }),
  }),
};
