/* eslint-disable react/forbid-prop-types */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle';
import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
import Link from 'gatsby-core-theme/src/hooks/link';
import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
import styles from './table.module.scss';

const listHeadings = [
  {
    id: 1,
    defaultValue: 'Casino name',
    key: 'casino_name',
  },
  {
    id: 2,
    defaultValue: 'Rating',
    key: 'rating',
  },
  {
    id: 3,
    defaultValue: 'Bonus',
    key: 'bonus',
    // customComponent: ({operator}) => ( <td>{operator.title}</td> ), This is an example
  },
  {
    id: 4,
    defaultValue: 'Top Features',
    key: 'top_features',
  },
  {
    id: 5,
    defaultValue: 'Payment Methods',
    key: 'payment_methods',
  },
  {
    id: 6,
    defaultValue: 'Banking',
    key: 'banking',
  },
  {
    id: 7,
    defaultValue: 'Currencies',
    key: 'currencies',
  },
  {
    id: 8,
    defaultValue: 'Licenses',
    key: 'licenses',
  },
];
export default function ComparisonTable({
  items,
  tabelInfo = listHeadings,
  ctaKey = 'play_now',
  type,
  tempate,
}) {
  const { translations } = useContext(Context) || {};

  const cell = (heading, item, key, index) => {
    const rowData = tabelInfo.find((m) => m.key === heading);
    if (rowData && rowData.customComponent) {
      const CustomComponent = rowData.customComponent;
      return <CustomComponent key={key} operator={item} />;
    }
    const imageObject =
      item?.relation?.standardised_logo_url_object || item?.relation?.logo_url_object;
    const itemName = item?.relation?.name;

    switch (heading) {
      case 'casino_name':
        return (
          <td key={key} className={styles.casinoName}>
            {imageObject?.filename ? (
              <LazyImg
                src={imagePrettyUrl(imageObject?.filename, 89, 89)}
                height={89}
                width={89}
                alt={itemName}
              />
            ) : (
              <GatsbyImg
                filename="default-operator.png"
                alt={itemName}
                width="9rem"
                height="9rem"
              />
            )}
            <div>
              <span>{itemName}</span>
              {item?.relation?.status !== 'not_recommended' && (
                <OperatorCta
                  module="comparison-table"
                  tracker="main"
                  operator={item?.relation}
                  translationsObj={{
                    active: { translationKey: ctaKey, defaultValue: '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' },
                  }}
                  // new key
                  gtmClass="comparison-table-gtm btn-cta"
                  pageTemplate={tempate}
                />
              )}
            </div>
          </td>
        );
      case 'rating':
        return (
          <td key={key} className={styles.raiting}>
            <StarRating numOfStars={5} rating={item?.relation?.rating} />

            {type === 'operator' && index === 0 ? null : (
              <ReviewLink
                template={tempate}
                {...(item?.relation?.name
                  ? { operatorName: item?.relation?.name }
                  : { pageName: item.title })}
                reviewPath={item.path}
              />
            )}
          </td>
        );
      case 'bonus':
        return (
          <td key={key} className={styles.bonus}>
            <Bonus module="comparison_table" tracker="main" item={item?.relation} />
          </td>
        );
      case 'top_features':
        return (
          <td key={key} className={styles.topFeatures}>
            {item?.relation?.selling_points &&
              item?.relation?.selling_points.map((sellingPoint) => (
                <span key={sellingPoint}>
                  <AiOutlineCheckCircle size={27} title="Check Icon" />
                  {sellingPoint}
                </span>
              ))}
          </td>
        );
      case 'payment_methods':
        return (
          <td key={key} className={styles.paymentMethods}>
            <div key={key}>
              {item?.relation?.bonus?.deposit_methods &&
                // eslint-disable-next-line array-callback-return
                item?.relation?.bonus?.deposit_methods?.slice(0, 5)?.map((deposit) => {
                  const logo =
                    deposit?.standardised_logo_filename_object?.filename ||
                    deposit?.standardised_logo_filename ||
                    deposit?.logo_filename;
                  if (!logo) return;
                  return (
                    <Link to={deposit?.path}>
                      <LazyImg
                        key={`${key}-${deposit.name}`}
                        src={imagePrettyUrl(logo, 72, 32)}
                        width={72}
                        height={32}
                        alt={deposit.name}
                      />
                    </Link>
                  );
                })}
            </div>
          </td>
        );
      case 'banking':
        return (
          <td key={key} className={styles.banking}>
            {item?.relation?.bonus?.min_deposit && (
              <p>
                {translate(translations, 'min_deposit', 'Min Deposit:')}
                <span>{item.relation.bonus.min_deposit}</span>
              </p>
            )}
            {item?.relation?.bonus?.max_withdrawal && (
              <p>
                {translate(translations, 'max_withdrawal', 'Max Withdrawal:')}
                <span>{item.relation.bonus.max_withdrawal}</span>
              </p>
            )}
          </td>
        );
      case 'currencies':
        return (
          <td key={key} className={styles.currencies}>
            {item?.relation?.bonus?.currencies &&
              item?.relation?.bonus?.currencies.slice(0, 6).map((currencies) => (
                // eslint-disable-next-line react/no-array-index-key
                <span key={`${key}-${currencies.iso_code}`}>{currencies.iso_code}</span>
              ))}
          </td>
        );
      case 'licenses':
        return (
          <td key={key} className={styles.licenses}>
            {item?.relation?.bonus?.license_objects &&
              item?.relation?.bonus?.license_objects.slice(0, 3).map((license) => {
                if (license?.logo_filename) {
                  return (
                    <LazyImg
                      key={license.name}
                      src={imagePrettyUrl(license?.logo_filename, 72, 72)}
                      height={32}
                      width={72}
                      alt={license.name}
                    />
                  );
                }
                return <></>;
              })}
          </td>
        );
      default:
        return null;
    }
  };

  const table = () => {
    const row = [];
    tabelInfo.forEach((heading) => {
      const cells = [];

      items.forEach((item, index) => {
        cells.push(cell(heading.key, item, `${heading.key}-${index}`, index));
      });

      row.push(
        <tr key={heading.key} className={`${styles[heading.key] || 'row'}_tr`}>
          <th>{translate(translations, heading.key, heading.defaultValue)}</th>
          {cells}
        </tr>
      );
    });

    return (
      <table className={styles.table}>
        <tbody>{row}</tbody>
      </table>
    );
  };

  return table();
}

ComparisonTable.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object),
};
