import React, {useContext, useEffect} from "react";
import { BrowserRouter as Router, ReactDOM } from "react-router-dom";

import UserAuth from '../../context/UserAuth';
import JKJamTracksLandingBody from "./JKJamTracksLandingBody";
import AppContext from "../../context/Context";
import {useResponsive} from "@farfetch/react-context-responsive";
import {Navbar} from "reactstrap";
import {topNavbarBreakpoint} from "../../config";
import Logo from "../navbar/Logo";
import {BrowserQueryProvider} from "../../context/BrowserQuery";
import Footer from "../footer/JKFooter";
import {initGA, logPageView } from "../../helpers/analytics";

const TemplatePage = ({ id, plan_code, slug, artist, song, location}) => {
    console.log('TemplatePage', id, plan_code, slug, artist, song, location);


    const {
        isFluid,
        isTopNav,
    } = useContext(AppContext);

    const { greaterThan } = useResponsive();

    const paddingClass = greaterThan.sm ? "px-6" : "px-1";

    useEffect(() => {
        initGA();
        //logPageView( window.location.pathname + window.location.search);

         //see if there is affiliate in query string and save it as cookie
        const urlParams = new URLSearchParams(window.location.search);
        const affiliate = urlParams.get('affiliate');
        const maxAge = 24 * 3600; // 1 day
        if (affiliate) {
            console.log(`Setting affiliate ${affiliate} cookie for artist landing page ${process.env.REACT_APP_COOKIE_DOMAIN}`);
            document.cookie = `affiliate_visitor=${affiliate}; path=/; max-age=${maxAge}; domain=${process.env.REACT_APP_COOKIE_DOMAIN}`;
        }
    }, [location]);

    return (
        <Router location={location} context={{}}>
            <div className={isFluid ? 'container-fluid' : 'container'}>
                <div className="content">
                    <Navbar
                        light
                        color="white"
                        className={`navbar-glass fs--1 font-weight-semi-bold row navbar-top sticky-kit mb-3 py-3 ${paddingClass}`}
                        expand={isTopNav && topNavbarBreakpoint}
                    >
                        <Logo at="navbar-top" id="topLogo" width={240}/>
                    </Navbar>
                    <div className={`pt-3 row ${paddingClass}`}>
                        <UserAuth path={location}>
                            <BrowserQueryProvider>
                                <JKJamTracksLandingBody id={id} plan_code={plan_code} slug={slug} song={song} artist={artist}
                                                    provided_jam_track={null}/>
                            </BrowserQueryProvider>
                        </UserAuth>
                    </div>
                    {/* <div className='px-6 row'> */}
                    <Footer/>
                    {/* </div> */}

                </div>
            </div>
        </Router>
    );
};


export default TemplatePage;

