/* 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 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,
  settingsButtonType = 'secondary',
  buttonSize = 'm',
  children,
  cookieName = 'CookieConsent',
  logo = '../../../../../images/logo.svg',
}) => {
  const [showModal, setShowModal] = useState(false);
  const [ck, setCk] = useState(
    (typeof window !== `undefined` && getCookie(cookieName) === 'true') || false
  );
  const [ckReject, setCkReject] = useState(
    (typeof window !== `undefined` && sessionStorage.getItem('CookieConsentDecline') === 'true') ||
      false
  );
  const { translations } = useContext(Context) || {};

  // when user declines
  const handleDecline = () => {
    setCkReject(true);
    setCookie(cookieName, false, 365, '/');
    sessionStorage.setItem('CookieConsentDecline', true);
    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);
    document.body.style.overflow = 'hidden';
  };

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

  return (
    <>
      <div className={`${styles.cookieConsent} ${(!ck && !ckReject && styles.show) || ''}`}>
        <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 && 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,
  buttonSize: PropTypes.string,
  logo: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
};

export default CookieConsent;
