/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { navigate } from 'gatsby';
import Modal from 'gatsby-core-theme/src/hooks/modal';
import { ModalContext } from 'gatsby-core-theme/src/hooks/modal/modalContext';
import Sticky from '~molecules/sticky';
import Button from '~atoms/button/button';
import { translate } from '~helpers/getters';
import { Context } from '~context/MainProvider';
import { setCookie, getCookie } from '~helpers/cookies';
import styles from './cookie-consent.module.scss';

const CookieConsent = ({
  acceptText = 'Accept',
  settingsCookie = false,
  declineText = 'Decline',
  declineURL = '#',
  location = 'bottom',
  children,
}) => {
  const cookieName = 'CookieConsent';
  // states
  const [ck, setCk] = useState(true);
  // when component did mount or state has updated
  const { showModal } = useContext(ModalContext);
  const { translations } = useContext(Context) || {};
  const { setCookieAccepted } = useContext(Context);

  useEffect(() => {
    const getCk = Boolean(getCookie(cookieName)) || false;
    setCk(getCk);
    setCookieAccepted(getCk);
  }, [ck, setCookieAccepted]);

  // when user declines
  const handleDecline = () => {
    if (declineURL !== '') navigate(`/${declineURL}`);
    setCk(true);
  };
  // when user accepts
  const handleAccept = () => {
    setCookie(cookieName, true, 365, '/');
    setCk(true);
  };

  return (
    <>
      {!showModal && !ck && (
        <Sticky showOnScroll className={styles.cookieConsent || ''} position={location}>
          <div className={styles.content || ''}>{children}</div>
          <div className={styles.buttonsContainer || ''}>
            {settingsCookie && (
              <Modal>
                <Button
                  btnText={translate(translations, 'cookie_setting_button', 'Cookie Setting')}
                  isInternalLink={false}
                  buttonType="terti"
                  buttonSize="m"
                  gtmClass="cookie-consent-gtm btn-cta"
                />
              </Modal>
            )}

            <Button
              onClick={() => handleAccept()}
              btnText={translate(translations, 'cookie_accept_button', acceptText)}
              isInternalLink={false}
              buttonType="primary"
              buttonSize="m"
              gtmClass="cookie-consent-gtm btn-cta"
            />

            {declineText && (
              <Button
                onClick={() => handleDecline()}
                btnText={translate(translations, 'cookie_decline_button', declineText)}
                isInternalLink={false}
                buttonType="secondary"
                buttonSize="m"
                gtmClass="cookie-consent-gtm btn-cta"
              />
            )}
          </div>
        </Sticky>
      )}
    </>
  );
};

CookieConsent.propTypes = {
  acceptText: PropTypes.string,
  settingsCookie: PropTypes.bool,
  declineText: PropTypes.string,
  declineURL: PropTypes.string,
  location: PropTypes.oneOf(['bottom', 'top']),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
};

export default CookieConsent;
