/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Button from '~atoms/button/button';
import { translate } from '~helpers/getters';
import { Context } from '~context/MainProvider';
import { setCookie, getCookie } from '~helpers/cookies';
import isSticky from '~hooks/stickyOnScroll';
import CookieModal from '../../../../components/molecules/cookie-modal';
import styles from './cookie-consent.module.scss';

const CookieConsent = ({
  acceptText = 'Accept',
  settingsCookie,
  settingsButtonType = 'secondary',
  isPageHomepage,
  buttonSize = 'm',
  cookieImage = '../../../images/cookie.png',
  children,
  cookieName = 'CookieConsent',
  logo = '../../../../../images/logo.svg',
}) => {
  const [showModal, setShowModal] = useState(false);
  const [ck, setCk] = useState(
    (typeof window !== `undefined` && getCookie(cookieName) === 'true') || false
  );
  const { translations } = useContext(Context) || {};
  const sticky = isSticky();

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

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

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

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

  const buttonShowModal = () => {
    setShowModal(true);
    document.body.style.overflow = 'hidden';
  };

  return (
    <>
      {!ck && (
        <div className={styles.cookieConsent}>
          <div className={`${styles?.consent || ''}`}>
            <div className={styles?.content || ''}>{children}</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 && isPageHomepage && ck && (
        <div
          role="button"
          tabIndex={0}
          className={styles.cookieButton}
          style={{ display: sticky ? 'flex' : 'none' }}
          onClick={buttonShowModal}
        >
          <LazyImage src={cookieImage} alt="Cookie Button" width="32" height="32" loading="eager" />
        </div>
      )}

      {settingsCookie && showModal && (
        <CookieModal
          logo={logo}
          hide={!showModal}
          handleAcceptCookies={handleAccept}
          handleDeclineCookies={handleDecline}
          closeModal={closeModal}
          ck={ck}
        />
      )}
    </>
  );
};

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

export default CookieConsent;
