/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React, {useRef} from 'react';
import './layout.scss';

const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
        return parts
            .pop()
            .split(';')
            .shift();
    }
    return undefined;
};

const setReferrerCookie = () => {
    const referrerUrl = document.referrer !== '' ? document.referrer : 'null';
    const now = new Date();
    const timeStamp = now.setDate(now.getDate() + 30);
    const expiration = new Date(timeStamp).toUTCString();
    const currentCookie = getCookie('referrer_url');
    if (!referrerUrl.split('?')[0].includes('testsigma.com')) {
        if (
            referrerUrl !== ''
            || currentCookie === 'null'
            || currentCookie === undefined
        ) {
            document.cookie = 'referrer_url=; expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;secure';
            document.cookie = `referrer_url=${referrerUrl};expires=${expiration};path=/;secure;`;
        }
    }
};

class Layout extends React.Component {
    observer = null;
    constructor(props) {
        super(props);
        this.state = { ...props };
    }

    componentDidMount() {
        setReferrerCookie();
        this.observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                const navElement = document.querySelector(
                    `.contextual-links a.dynamic-link__internal[href*="#${entry.target.id}"]`,
                )
                if (entry.isIntersecting) {
                    if (navElement && !navElement.classList.contains('border-red-100')) {
                        document.querySelectorAll('.contextual-links__link a.border-red-100.border-b-2').forEach(previousActive => {
                            previousActive.classList.remove('border-b-2', 'border-red-100');
                        })
                        navElement.classList.add('border-b-2', 'border-red-100');
                    }
                }
            })
        }, {
            threshold: 0.5,
        });

        const contextualLinks = document.querySelectorAll('h2');
        contextualLinks.forEach(headerWithId => {
          this.observer.observe(headerWithId);
        });
    }

    componentWillUnmount() {
        this.observer.disconnect()
        this.observer = null
    }

    render() {
        const { children } = this.state;
        return (
            <>
                <main>
                    {children}
                </main>
            </>
        );
    }
}

export default Layout;