/* eslint-disable import/no-extraneous-dependencies */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'gatsby';
import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
import { BiLike } from '@react-icons/all-files/bi/BiLike';
import { imagePrettyUrl } from '~helpers/getters.mjs';
import { getAltText } from '~helpers/image';
import LazyImage from '~hooks/lazy-image';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { addVote } from '../../../../services';

import styles from './feedback.module.scss';

const FeedBack = ({
  pageId,
  casinoTitle,
  trueVotes,
  falseVotes,
  contactUs = '/contact-us',
  operatorImg,
  width = 80,
  height = 80,
  type,
}) => {
  const [voted, setVote] = useState(null);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(true);
  const recomendTranslate = type === 'game' ? 'recomend_game_title' : 'recomend_casino_title'
  const feedbackTranslate = type === 'game' ? 'recomend_game_feedback' : 'recomend_casino_feedback';
  const positiveFeedback = type === 'game' ? 'positive_game_feedback' : 'positive_casino_feedback';
  const negativeFeedback = type === 'game' ? 'negative_game_feedback' : 'negative_casino_feedback';
  const vote = async (feedBack) => {
    const res = await addVote(feedBack, pageId);
    setVote(feedBack);

    // eslint-disable-next-line no-unused-expressions
    !res?.success ? setError(res?.errors[0]) : setSuccess(true);
  };
  const form = () => (
    <div className={styles?.formBox || ''}>
      <span
        onClick={voted === null ? () => vote(true) : null}
        className={`${styles.button} ${voted ? styles?.like || '' : ''} ${
          voted === false ? styles?.disabled || '' : ''
        }`}
        aria-hidden="true"
        data-testid="like-button"
      >
        <BiLike color="#323C46" title="Like Icon" />
      </span>
      <span
        onClick={voted === null ? () => vote(false) : null}
        className={`${styles.button} ${!voted && voted !== null && styles.dislike} ${
          voted && styles.disabled
        }`}
        aria-hidden="true"
        data-testid="dislike-button"
      >
        <BiDislike color="#323C46" title="Dislike Icon" />
      </span>
    </div>
  );

  const feedbackText = () => (
    <>
      {voted === null ? (
        <div className={styles?.details || ''}>{`${trueVotes} ${useTranslate(
          'of_feedback',
          'of'
        )} ${trueVotes + falseVotes} ${useTranslate(
          feedbackTranslate,
          'users recommend [casinoTitle]'
        ).replace('[casinoTitle]', casinoTitle)} `}</div>
      ) : (
        <div className={styles?.voted || ''}>
          <span>{useTranslate('thanks_feedback', 'Thanks for your feedback!')}</span>
          {error ? (
            <p className={styles?.error || ''}>{useTranslate('error_info', error)}</p>
          ) : (
            <>
              {success && (
                <>
                  <p>
                    {voted
                      ? useTranslate(
                          positiveFeedback,
                          'What did you like about [casinoTitle]? Let us know, send us a message here '
                        ).replace('[casinoTitle]', casinoTitle)
                      : useTranslate(
                          negativeFeedback,
                          'Sorry about your experience at [casinoTitle]. What happened? send us a message '
                        ).replace('[casinoTitle]', casinoTitle)}
                    <Link to={contactUs}> {useTranslate('hereText', 'here')} </Link>.
                  </p>
                </>
              )}
            </>
          )}
        </div>
      )}
    </>
  );

  const userCount = () => (
    <p className={`${styles.userCount} ${voted !== null ? styles.showCounter : ''}`}>
      {voted === false ? (
        <>
          {!voted ? falseVotes + 1 : falseVotes} {useTranslate('users', 'Users')}
          <span>{useTranslate('not_recommend', 'Don`t Recommend it')}</span>
        </>
      ) : (
        <>
          {voted ? trueVotes + 1 : trueVotes} {useTranslate('users', 'Users')}{' '}
          <span>{useTranslate('recommend', 'Recommend it')}</span>
        </>
      )}
    </p>
  );

  return (
    <div className={styles?.feedbackBox || ''}>
      <LazyImage
        src={imagePrettyUrl(operatorImg?.filename, width, height)}
        width={width}
        height={height}
        alt={getAltText(operatorImg, casinoTitle)}
      />
      {voted === null && (
        <span className={styles.title}>
          {useTranslate(recomendTranslate, 'Would you recomend [casinoTitle] ?').replace(
            '[casinoTitle]',
            casinoTitle
          )}
        </span>
      )}
      {userCount()}
      {form()}
      {feedbackText()}
    </div>
  );
};

FeedBack.propTypes = {
  pageId: PropTypes.number,
  casinoTitle: PropTypes.string,
  trueVotes: PropTypes.number,
  falseVotes: PropTypes.number,
  contactUs: PropTypes.string,
  operatorImg: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
  type: PropTypes.string,
};

export default FeedBack;
