/* eslint-disable arrow-body-style */
/* eslint-disable no-nested-ternary */
import React from 'react';
import PropTypes from 'prop-types';
import PrettyLink from '~atoms/pretty-link';
import styles from './operator-info-block.module.scss';
import keygen from '~helpers/keygen';

const OperatorInfoBlock = ({ page }) => {
  const { relation } = page;
  const status = relation?.status;
  if (status !== 'active') return null;
  const infos = [
    { field_name: 'url', field_label: 'URL' },
    { field_name: 'owner', field_label: 'Owner' },
    { field_name: 'founded', field_label: 'Founded' },
    { field_name: 'support_types', field_label: 'Live Chat' },
    { field_name: 'types', field_label: 'Live Casino' },
    { field_name: 'games_amount', field_label: 'Number of Games' },
  ];
  return (
    <>
      <ul className={styles.operatorInfoBlock || ''}>
        {infos.map((item) => {
          return (
            <li key={keygen()}>
              <p className={styles.label || ''}>{item.field_label}</p>
              <div className={styles.value || ''}>
                {item.field_name === 'url' ? (
                  <PrettyLink
                    operator={item}
                    pageTemplate={page.template}
                    module="operator_info_block"
                    tracker="main"
                    clickedElement="operator_name"
                    className="operator-info-block-gtm"
                  >
                    {relation[item.field_name]}
                  </PrettyLink>
                ) : item.field_name === 'support_types' ? (
                  relation.support_types.toLowerCase().includes('live chat') ? (
                    <p>Yes</p>
                  ) : (
                    <p>No</p>
                  )
                ) : item.field_name === 'types' ? (
                  relation.types.includes('livecasino') ? (
                    <p>Yes</p>
                  ) : (
                    <p>No</p>
                  )
                ) : (
                  <p>
                    {item.field_name === 'founded'
                      ? relation[item.field_name].substring(0, 4)
                      : relation[item.field_name]}
                  </p>
                )}
              </div>
            </li>
          );
        })}
      </ul>
    </>
  );
};

OperatorInfoBlock.propTypes = {
  // eslint-disable-next-line react/no-unused-prop-types
  activeOperator: PropTypes.bool,
  page: PropTypes.shape({
    relation: PropTypes.shape({
      url: PropTypes.string,
      owner: PropTypes.string,
      founded: PropTypes.string,
      support_types: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
      types: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
      games_amount: PropTypes.string,
      status: PropTypes.string,
    }),
    template: PropTypes.string,
  }),
};

export default OperatorInfoBlock;
