/* eslint-disable react/forbid-prop-types */
/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';
import { FaCheck } from '@react-icons/all-files/fa/FaCheck';
import { FaAngleDown } from '@react-icons/all-files/fa/FaAngleDown';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import Link from 'gatsby-core-theme/src/hooks/link';
import LazyImage 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';
import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import Banking from '../banking/index';
import Bonus from '../bonusTable/index';
import styles from './column.module.scss';

const Index = ({
  item,
  details,
  rating,
  bonus,
  topFeatures,
  banking,
  licenses,
  index,
  hideRow,
  chnageHeights,
  licensesMore,
  layout = 'list',
}) => {
  const { min_deposit } = item.bonus;
  const { max_withdrawal } = item.bonus;
  const currency = item?.bonus?.currency;
  const licenses_list = item.bonus.license_objects;

  const pros = item.extra_fields?.pro_1 || item.extra_fields?.pro_2 || item.extra_fields?.pro_3;
  let sellingPoints = item.selling_points;
  if (pros) {
    sellingPoints = [
      item.extra_fields.pro_1,
      item.extra_fields.pro_2,
      item.extra_fields.pro_3,
    ].filter(Boolean);
  }

  const handelHeights = (id, items) => {
    const rows = Math.ceil(items / 3);
    chnageHeights(id, 54 * rows);
  };

  return (
    <div className={index === 0 ? styles?.activeColumn || '' : styles?.otherCasino || ''}>
      <div className={styles?.silde || ''}>
        <tr style={{ height: details }} id="details">
          <td>
            <div className={styles?.details || ''}>
              <div className={styles?.logo || ''}>
                <Link to={item.review_link} className="table-column-gtm">
                  <LazyImage src={imagePrettyUrl(item.logo_url, 120, 45)} alt={item.name} />
                </Link>

                <p>{item.name}</p>
              </div>
              <div className={styles?.cta || ''}>
                <OperatorCta
                  module="comparison_table"
                  operator={item}
                  gtmClass="table-operator-cta-gtm"
                />
              </div>
            </div>
          </td>
        </tr>
        <tr style={{ height: rating }} id="rating">
          <td>
            <div className={styles?.rating || ''}>
              <StarRating numOfStars={5} rating={item.rating} />
            </div>
          </td>
        </tr>
        <tr style={{ height: bonus }} id="bonus">
          <td>
            <div className={styles?.bonus || ''}>
              <div className={styles?.bonusComponent || ''}>
                <Bonus item={item} tracker="main" />
              </div>

              {item?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
                <div className={styles?.tnc || ''}>
                  <Tnc
                    buttonText={item?.extra_fields?.terms_and_condition_link_text}
                    contentText={item?.extra_fields?.terms_and_conditions}
                    onlyMobile={layout === 'list'}
                    operator={item}
                  />
                </div>
              )}
            </div>
          </td>
        </tr>
        <tr style={{ height: topFeatures, display: hideRow ? 'none' : null }} id="topFeatures">
          <td>
            <div className={styles?.features || ''}>
              <SellingPoints
                icon={<FaCheck size={35} color="#17182F" title="Check Icon" />}
                sellingPoints={sellingPoints}
                limit={3}
              />
            </div>
          </td>
        </tr>
        <tr style={{ height: banking, display: hideRow ? 'none' : null }} id="banking">
          <td>
            <div className={styles?.banking || ''}>
              <Banking
                min_deposit={min_deposit}
                max_withdrawal={max_withdrawal}
                currency={currency}
              />
            </div>
          </td>
        </tr>
        <tr
          style={{ height: licenses, display: hideRow ? 'none' : 'block', overflow: 'hidden' }}
          id="licenses"
        >
          <td>
            <div className={styles?.licenses || ''}>
              {licenses_list &&
                licenses_list.map((res) => (
                  <LazyImage
                    src={imagePrettyUrl(res.logo_filename, 63, 32)}
                    alt={`license ${res.logo_filename}`}
                  />
                ))}
              {licenses_list?.length > 3 && licensesMore ? (
                <FaAngleDown
                  title="Down-pointing Arrow Icon"
                  onClick={() => {
                    handelHeights('licenses', licenses_list.length);
                  }}
                />
              ) : null}
            </div>
          </td>
        </tr>
      </div>
    </div>
  );
};
Index.propTypes = {
  item: PropTypes.object,
  details: PropTypes.number,
  rating: PropTypes.number,
  bonus: PropTypes.number,
  topFeatures: PropTypes.number,
  banking: PropTypes.number,
  licenses: PropTypes.number,
  index: PropTypes.number,
  hideRow: PropTypes.bool,
  chnageHeights: PropTypes.func,
  licensesMore: PropTypes.bool,
  layout: PropTypes.string,
};
export default Index;
