import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Button from 'gatsby-core-theme/src/components/atoms/button/button';

import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './feedback-module.module.scss';

const FeedBackModule = ({ path = 'contact-us' }) => {
  const [response, setResponse] = useState(null);

  const handleClick = (userResponse) => {
    setResponse(userResponse);
  };

  return (
    <div className={styles?.mainContainer || ''}>
      <div className={styles?.dottedBorder || ''}>
        <div className={styles?.container || ''}>
          <div className={styles?.textContainer || ''}>
            {!response && (
              <p className={styles?.firstText || ''}>{`${useTranslate(
                'have_you_found_text',
                "Have You Found What You're Looking for?"
              )}`}</p>
            )}
            {!response && (
              <p
                className={`${styles?.secondText || ''} ${styles?.onlyDesktop || ''}`}
              >{`${useTranslate('feedback_text', 'Your feedback is paramount!')}`}</p>
            )}

            {response === 'yes' && (
              <p className={styles?.firstText || ''}>{`${useTranslate(
                'yes_first_text',
                'Glad To hear that! 😊'
              )}`}</p>
            )}

            {response === 'yes' && (
              <p className={styles?.secondText || ''}>
                {`${useTranslate(
                  'yes_second_text',
                  'Tell us more about what you liked best. Send us a message'
                )}`}{' '}
                <Button
                  btnText={`${useTranslate('here_text', 'here')}`}
                  buttonType="none"
                  to={path}
                />
              </p>
            )}

            {response === 'no' && (
              <p className={styles?.firstText || ''}>{`${useTranslate(
                'no_first_text',
                'Sorry to hear about that! 😢'
              )}`}</p>
            )}

            {response === 'no' && (
              <p className={styles?.secondText || ''}>
                {`${useTranslate('no_second_text', 'Tell us what you need to know on this topic')}`}
                <Button
                  to={path}
                  buttonType="none"
                  btnText={`${useTranslate('here_text', 'here')}`}
                />
              </p>
            )}
          </div>
          <div className={styles?.buttonContainer || ''}>
            <button
              type="button"
              onClick={() => handleClick('yes')}
              className={response === 'yes' ? styles.yesButton : ''}
              disabled={response !== null}
            >
              {`${useTranslate('yes_button', 'Yes')}`}
            </button>
            <button
              type="button"
              onClick={() => handleClick('no')}
              className={response === 'no' ? styles?.noButton || '' : ''}
              disabled={response !== null}
            >
              {`${useTranslate('no_button', 'No')}`}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

FeedBackModule.propTypes = {
  path: PropTypes.string,
};

export default FeedBackModule;
