/* 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, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters.mjs';
import { BiLike } from '@react-icons/all-files/bi/BiLike';
import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { addVote } from '../../../../services';

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

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

  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} ${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 here '
                        ).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>
      )}
    </>
  );

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

  return (
    <div className={styles?.feedbackBox || ''}>
      <LazyImage src={imagePrettyUrl(operatorImg)} />
      {voted === null && (
        <span className={styles.title}>
          {translate(
            translations,
            'recomend_casino_title',
            '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,
};

export default FeedBack;
