import React from 'react';
import { ContrastButton } from 'app/shared/components/contrastButton/contrastButton';
import cx from 'classnames';
import SurveyThumbsUpIcon from '../../../../assets/images/icon-survey-thumbsup.component.svg';
import { getSurveyUrl } from 'app/modules/survey/store/survey.selectors';
import { useSelector } from 'react-redux';

interface Props {
  isVisible: boolean
}

const SurveyPopup = ({ isVisible }: Props) => {
  const surveyUrl = useSelector(getSurveyUrl);

  return (
    <div className={cx('c-survey-popup', { 'c-survey-popup--hidden': !isVisible })}>
      <div className="u-position--relative">
        <div className="c-survey-popup__background" />
        <div className="u-display--flex u-justify-content-center o-gutter-top--big o-gutter-bottom--big">
          <SurveyThumbsUpIcon fill="#4DB5AB" />
        </div>
        <div className="c-survey-popup__content">
          <h4 className="c-survey-popup__headline u-margin-bottom--small">
          Your feedback can help make InSite digital even better for you
          </h4>
          <p className="c-survey-popup__paragraph u-margin-bottom--medium">
          Be part of making InSite digital even more useful by rating your experience. It only takes 5 min. Thank you!
          </p>
          <ContrastButton link={surveyUrl}><i className="icon-open-box u-margin-right--small" />Open survey</ContrastButton>
          <hr className="c-survey-popup__separator u-margin-top--medium" />
          <p className="c-survey-popup__caption u-margin-top--medium u-margin-bottom--none">
          We evaluate the results monthly to optimize your ability to track every part of your vessel and pool performance via InSite digital.
          </p>
        </div>
      </div>
    </div>
  );
};

export { SurveyPopup };