/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useContext, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Button from '~atoms/button/button';
import { translate } from '~helpers/getters';
import { Context } from '~context/MainProvider';
import { setCookie, getCookie } from '~helpers/cookies';
import CookieModal from '../../../../components/molecules/cookie-modal';
import styles from './cookie-consent.module.scss';

const CookieConsent = ({
  acceptText = 'Accept',
  settingsCookie = true,
  settingsButtonType = 'secondary',
  buttonSize = 'm',
  // children,
  cookieName = 'CookieConsent',
  logo = '../../../../../images/logoColor.svg',
  pathPrefix = null,
  privacyPolicyPage = 'privacy-policy',
}) => {
  const [showModal, setShowModal] = useState(false);
  const { translations } = useContext(Context) || {};

  const [showCookieConsent, setShowCookieConsent] = useState(false);

  // when user declines
  const handleDecline = () => {
    setCookie(cookieName, false, 365, '/');
    setCookie('showCookie', false, 365, '/');
    setShowCookieConsent(false);
    setShowModal(false);
    document.body.style.overflow = 'auto';
  };

  // when user accepts
  const handleAccept = () => {
    setCookie(cookieName, true, 365, '/');
    setCookie('showCookie', false, 365, '/');
    setShowCookieConsent(false);
    setShowModal(false);
    document.body.style.overflow = 'auto';
  };

  const handleShowModalClick = () => {
    setShowModal(!showModal);
    document.body.style.overflow = 'hidden';
  };

  const closeModal = () => {
    setShowModal(false);
    document.body.style.overflow = 'auto';
  };

  useEffect(() => {
    if (typeof window !== `undefined` && getCookie('showCookie') !== 'false') {
      setShowCookieConsent(true);
    }
  }, []);

  return (
    <>
      <div className={`${styles.cookieConsent} ${showCookieConsent && styles.show}`}>
        <div className={`${styles?.consent || ''}`}>
          <div className={styles?.content || ''}>
            <p>
              {translate(
                translations,
                'cookie_text_first',
                `Please note that on our website we use cookes necessary for the functioning of our website, cookes that optimize the performance. To learn more about our cookies  please read our Cookie Policy.`
              )}
              <a
                href={
                  pathPrefix !== null
                    ? `/${pathPrefix}/${privacyPolicyPage}`
                    : `/${privacyPolicyPage}`
                }
                className="cookie-consent-gtm"
              >
                &nbsp; {translate(translations, 'cookie_text_second', 'Cookie Policy')}
              </a>
              .
            </p>
          </div>
          <div className={styles?.buttonsContainer || ''}>
            {settingsCookie && (
              <Button
                isInternalLink={false}
                onClick={handleShowModalClick}
                btnText={translate(translations, 'cookie_setting_button', 'Cookie Setting')}
                buttonType={settingsButtonType}
                buttonSize={buttonSize}
                gtmClass="cookie-consent-gtm btn-cta"
              />
            )}
            <Button
              onClick={() => handleAccept()}
              btnText={translate(translations, 'cookie_accept_button', acceptText)}
              isInternalLink={false}
              buttonType="primary"
              buttonSize={buttonSize}
              gtmClass="cookie-consent-gtm btn-cta"
            />
          </div>
        </div>
      </div>
      {settingsCookie && showModal && (
        <CookieModal
          logo={logo}
          hide={!showModal}
          handleAcceptCookies={handleAccept}
          handleDeclineCookies={handleDecline}
          closeModal={closeModal}
        />
      )}
    </>
  );
};

CookieConsent.propTypes = {
  acceptText: PropTypes.string,
  settingsCookie: PropTypes.bool,
  cookieName: PropTypes.string,
  settingsButtonType: PropTypes.string,
  buttonSize: PropTypes.string,
  logo: PropTypes.string,
  pathPrefix: PropTypes.string,
  privacyPolicyPage: PropTypes.string,
  // children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
};

export default CookieConsent;
