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

import JKJamTracksArtistLandingBody from "./JKJamTracksArtistLandingBody";
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 {initGA, logPageView } from "../../helpers/analytics";
import Footer from "../footer/JKFooter";

const ArtistTemplatePage = ({ original_artist_slug, artist, songs}) => {
    console.log('ArtistTemplatePage', original_artist_slug, artist);

    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}`}>
                        <BrowserQueryProvider>
                            <JKJamTracksArtistLandingBody artist={artist} original_artist_slug={original_artist_slug} songs={songs}
                                                    provided_jam_track={null}/>
                        </BrowserQueryProvider>
                    </div>
                    {/* <div className='px-6 row'> */}
                    <Footer/>
                    {/* </div> */}

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


export default ArtistTemplatePage;

