/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';
import { getBonus } from 'gatsby-core-theme/src/helpers/getters';
import Link from 'gatsby-core-theme/src/hooks/link';
import useTranslate from '~hooks/useTranslate/useTranslate';
import PrettyLink from '~atoms/pretty-link';
import { TrackingKeys } from '~constants/tracking-api'
import styles from './table.module.scss';

const CasinosTable = ({ module, page,  modulePosition  }) => {
  const { items } = module || {};

  const oneLiner = ({ one_liner }) => {
    if (one_liner) {
      const [firstLine, secondLine] = one_liner.split('+');
      return (
        <>
          <span className={styles?.firstLine || ''}>
            {firstLine}
            <br />
          </span>
          {secondLine && <span className={styles?.secondLine || ''}>{`+${secondLine}`}</span>}
        </>
      );
    }
    return <></>;
  };

  return (
    <div className={styles?.container || ''}>
      <table>
        <thead>
          <tr>
            <th>{`${useTranslate('online_casino', 'Online casino')}`}</th>
            <th>{`${useTranslate('welcome_bonus', 'Welcome bonus')}`}</th>
            <th>{`${useTranslate('visit_online_casino', 'Visit online casino')}`}</th>
          </tr>
        </thead>
        <tbody>
          {items &&
            items.map((item) => (
              <tr>
                <td>
                  <Link
                    to={item?.path || item?.relation?.path}
                    title={item?.title}
                    className={`${styles?.casinoLogo || ''} table-operator-card-gtm`}
                  >
                    {item?.relation?.operator_name || item?.relation?.name}
                  </Link>
                </td>
                <td>
                  {getBonus('main', item?.relation) && oneLiner(getBonus('main', item?.relation))}
                </td>
                <td style={{ textAlign: 'left' }}>
                  <PrettyLink
                    operator={item.relation}
                    pageTemplate={page?.template}
                    moduleName={TrackingKeys?.OPERATORSTABLE}
                    tracker="main"
                    clickedElement="operator_table_cta"
                    className="table-operator-card-gtm btn-cta"
                    modulePosition={modulePosition}
                  >
                    {`${useTranslate('visit_table', 'Visit')} ${item?.relation?.name}`}
                  </PrettyLink>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

export default CasinosTable;

CasinosTable.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.shape({})),
  }).isRequired,
  page: PropTypes.shape({
    template: PropTypes.string,
  }),
  modulePosition: PropTypes.number,
};
