/* eslint-disable import/no-extraneous-dependencies */
import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'gatsby';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { BiLike } from '@react-icons/all-files/bi/BiLike';
import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
import { addVote } from '../../../../services';

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

const FeedBack = ({ pageId, casinoTitle, trueVotes, falseVotes, contactUs = '/contact-us' }) => {
  const { translations } = useContext(Context) || {};
  const [voted, setVote] = useState(null);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(null);

  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>
          {translate(
            translations,
            'recomend_casino_title',
            '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
                ? translate(translations, 'recomend_casino', 'Recommendations')
                : translate(translations, '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} ${translate(
            translations,
            'of_feedback',
            'of'
          )} ${trueVotes + falseVotes} ${translate(
            translations,
            'user_recomend_feedback',
            'users recommend [casinoTitle]'
          ).replace('[casinoTitle]', casinoTitle)} `}</div>
        ) : (
          <div className={styles?.voted || ''}>
            <span>{translate(translations, 'thanks_feedback', 'Thanks for your feedback!')}</span>
            {error ? (
              <p className={styles?.error || ''}>{translate(translations, 'error_info', error)}</p>
            ) : (
              <>
                {success && (
                  <p>
                    {voted
                      ? translate(
                          translations,
                          'positive_feedback',
                          'What did you like about [casinoTitle]? Let us know, send us a message'
                        ).replace('[casinoTitle]', casinoTitle)
                      : translate(
                          translations,
                          'negative_feedback',
                          'Sorry about your experience at [casinoTitle]. What happened? send us a message'
                        ).replace('[casinoTitle]', casinoTitle)}
                    <Link to={contactUs}> {translate(translations, 'hereText', 'here')} </Link>.
                  </p>
                )}
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

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

export default FeedBack;
