import React, {useContext, useEffect, useState} from 'react';
import {Steps} from 'intro.js-react';
import {dashboardSteps, dashboardStepsNoRole} from "../../dua-tours/tour-steps";
import AuthContext from "../../context/auth-context";



const DashboardTour = () => {

    const {currentUser, tourVisible, setTourVisible} = useContext(AuthContext);
    const [screenWidth, setScreenWidth] = useState<number>(window.innerWidth);

    // Fixes a scrolling issue regarding the highlighted area's position when next step's content is outside the viewport
    const stepMonitor = (next: number) => {
        if (screenWidth <= 1497 && next === 9) {
            setTimeout(() => {
                window.scrollTo(708, 423);
            }, 500);
        }
        if (next === 10) {
            setTimeout(() => {
                window.scrollTo(435, 463);
            }, 500);
        }
    }

    useEffect(() => {
        setScreenWidth(window.innerWidth)
    }, [window.innerWidth]);


    return (
        <Steps
            enabled={tourVisible}
            steps={currentUser!.roles.length === 1 ? dashboardStepsNoRole : dashboardSteps}
            initialStep={0}
            options={{
                scrollToElement: false, // Disables auto-scroll to steps because it messes with the highlighted areas positions
                overlayOpacity: 0.3,
                exitOnOverlayClick: false,
                showStepNumbers: true,
                stepNumbersOfLabel: '/',
                hidePrev: true,
                prevLabel: 'Προηγούμενο',
                showBullets: true,
                nextLabel: 'Επόμενο',
                doneLabel: 'Τέλος',
                showProgress: true,
                tooltipClass: 'onboarding-tooltip',
                buttonClass: 'onboarding-btn',
                dontShowAgain: true, // A checkbox which when ticked, creates a browser cookie at the end of the tour. This cookie prevents the tour from initiating everytime this page is loaded.
                dontShowAgainLabel: `Μόνιμη απενεργοποίηση οδηγού.`, // Aforementioned checkbox area label/text
                dontShowAgainCookie: 'DUA Onboarding Tour - Dashboard', // Customize browser cookie name
            }}
            // Native callback function (nextElement is also native, its value is the next step's index) - optional
            onBeforeChange={(nextElement) => {
                // Checking the step index (starts at 0) in order to fix a small scrolling issue manually.
                stepMonitor(nextElement);
            }}
            // Native callback function - optional
            onChange={(nextElement) => {
                // This just reverts toggle QuickAccess buttton's visibility to 'visible' starting from the second step (see below)
                // const toggleAccess = document.querySelector('.toggle-access') as HTMLElement;
                // if (nextElement === 1 && toggleAccess) {
                //     toggleAccess.style.visibility = 'visible';
                // }
                // if (nextElement === 0 && toggleAccess) {
                //     toggleAccess.style.visibility = 'hidden';
                // }
            }}
            // Native callback function - optional
            onStart={() => {
                // Fix regarding main app container overflow blocking the final step
                const initialOverflow = document.getElementById('inner-content-scrollbar') as HTMLElement;
                // const toggleAccess = document.querySelector('.toggle-access') as HTMLElement;
                if (initialOverflow) {
                    initialOverflow.style.overflowX = 'initial';
                    initialOverflow.style.overflowY = 'initial';
                    initialOverflow.style.marginBottom = '2rem';
                }
                // Fix regarding QuickAccess toggle button overlapping first step's highlight area by setting its visibility to 'hidden'
                // if (toggleAccess) {
                //     toggleAccess.style.visibility = 'hidden';
                // }
            }}
            // Native callback function - mandatory. Use something like a console.log if no logic is needed
            onExit={() => {
                // This just reverts css overflow to the original values when the above fix isn't needed anymore
                const initialOverflow = document.getElementById('inner-content-scrollbar') as HTMLElement;
                setTimeout(() => {
                    if (initialOverflow) {
                        initialOverflow.style.overflowY = 'scroll';
                        initialOverflow.style.overflowX = 'hidden';
                        initialOverflow.style.marginBottom = 'initial';
                    }
                }, 100);
                setTourVisible(false);
            }}
        />
    );
}

export default DashboardTour;