import React, {FunctionComponent, useEffect, useState} from "react"
import _ from "lodash";
import {
    ActivitiesForLandingListingsNameEnum,
    ActivitiesForLandingTitlesEnum,
    ActivitiesForLandingTitlesKeyedByIndexEnum,
    ActivitiesForLandingTitlesNumberBasedEnum, ActivitiesForLandingTitlesSubLocationKeyedByIndexEnum
} from "/imports/api/Activities/both/enums";

interface EveryspaceHeroSliderProps {

}

const DEFAULT_SLIDER_TIMER_IN_SECONDS = 5

//Events, Film & Photo, Celebrations, Meetings, Weddings -> In this exact order
export const EveryspaceHeroSlider: FunctionComponent<EveryspaceHeroSliderProps> = () => {
    const [activeIndex, setActiveIndex] = useState(0);
    const [widthToUse, setWidthToUse] = useState(-activeIndex * document.body.clientWidth);
    const [timeLeft, setTimeLeft] = useState(DEFAULT_SLIDER_TIMER_IN_SECONDS);

    const onResize = () => {
        setWidthToUse(-activeIndex * document.body.clientWidth);
    }

    useEffect(() => {
        if (!timeLeft) {
            if(activeIndex !== 5) {
                setActiveIndex(activeIndex + 1);
            } else {
                setActiveIndex(0);
            }
            setTimeLeft(DEFAULT_SLIDER_TIMER_IN_SECONDS);
        }

        // save intervalId to clear the interval when the
        // component re-renders
        const intervalId = setInterval(() => {
            setTimeLeft(timeLeft - 1);
        }, 2000);

        // clear interval on re-render to avoid memory leaks
        return () => clearInterval(intervalId);
        // add timeLeft as a dependency to re-rerun the effect
        // when we update it
    }, [timeLeft]);

    useEffect(() => {
        onResize();
        window.addEventListener("resize", onResize);
        return () => window.removeEventListener("resize", onResize);
    }, [document.body.clientWidth, activeIndex])

    return <div className="position-relative">
        <div className={"everyspace-landing-hero-slider"}>
            {_.map(ActivitiesForLandingTitlesEnum, (value, index) => {
                return <div className={`bg-cover-default landing-slider-hero-image position-relative ${index.toLowerCase()}`} style={{ opacity: ActivitiesForLandingTitlesNumberBasedEnum[activeIndex] === value ? 1:0, transform: `translateX(${widthToUse}px)`, transition: "opacity 750ms ease-in-out" }}>
                    <span className="hero-listing-name">{ActivitiesForLandingListingsNameEnum[value]}</span>
                </div>
            }) }
        </div>

        <div className="everyspace-hero-spacer" />

        <div className="position-relative">
            <div className="grid-container">
                <h1 className="everyspace-hero-title">
                    Find the perfect
                    <div className="whitespace-nowrap">
                        <span className="title-underline">
                            {ActivitiesForLandingTitlesKeyedByIndexEnum[activeIndex]}
                        </span>
                        &nbsp;
                        {ActivitiesForLandingTitlesSubLocationKeyedByIndexEnum[activeIndex]}
                    </div>
                </h1>
            </div>
        </div>

    </div>
}