/* eslint-disable import/no-extraneous-dependencies */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'gatsby';

import { BiLike } from '@react-icons/all-files/bi/BiLike';
import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
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', type }) => {
  const [voted, setVote] = useState(null);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(null);
  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 (feetBack) => {
    const res = await addVote(feetBack, pageId);
    setVote(feetBack);

    // eslint-disable-next-line no-unused-expressions
    !res?.success ? setError(res?.errors[0]) : setSuccess(true);
  };

  return (
    <div className={styles?.container || ''}>
      <div className={styles?.feedbackBox || ''}>
        <span>
          {useTranslate(recomendTranslate, 'Would you recomend [casinoTitle] ?').replace(
            '[casinoTitle]',
            casinoTitle
          )}
        </span>
        <div className={styles?.formBox || ''}>
          <span
            onClick={voted === null ? () => vote(true) : null}
            className={`${voted ? styles?.like || '' : ''} ${
              voted === false ? styles?.disabled || '' : ''
            }`}
            aria-hidden="true"
            data-testid="like-button"
          >
            <BiLike color="#323C46" title="Like Icon" />
          </span>
          <div>
            <span className={styles?.number || ''}>{voted ? trueVotes + 1 : trueVotes} </span>

            <span className={styles?.text || ''}>
              {voted || voted === undefined || voted === null
                ? useTranslate('recomend_casino', 'Recommendations')
                : useTranslate('dont_recomend_casino', 'Don’t Recommend it')}
            </span>
          </div>
          <span
            onClick={voted === null ? () => vote(false) : null}
            className={`${!voted && voted !== null && styles.dislike} ${voted && styles.disabled}`}
            aria-hidden="true"
            data-testid="dislike-button"
          >
            <BiDislike color="#323C46" title="Dislike Icon" />
          </span>
        </div>
        {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'
                        ).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>
        )}
      </div>
    </div>
  );
};

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

export default FeedBack;
