import React, {FunctionComponent, useEffect, useRef, useState} from "react"
import {HeaderSearchModalEmitter} from "/imports/ui/components/modals/HeaderSearchModal";
import {setOffCanvasEvent} from "/imports/api/App/client/utils/setOffCanvasEvent";

interface WhatAreYouLookingForProps {

}


const Slider = [
    "event venues",
    "film locations",
    "meeting spaces",
    "wedding venues",
    "celebration venues",
    "photo shoot locations",
];

const correspondingEvent = [
    "Event",
    "Film",
    "Meeting",
    "Wedding",
    "Celebration",
    "Photo Shoot",
];

export const WhatAreYouLookingFor: FunctionComponent<WhatAreYouLookingForProps> = () => {
    const sliderRef = useRef();
    const [activeIndex, setActiveIndex] = useState(0);
    const [widthToUse, setWidthToUse] = useState(window.innerWidth < 1024 ? 320:580);
    const isDesktop = window.innerWidth >= 1024;

    useEffect(() => {
        if(sliderRef.current) {
            // @ts-ignore
            const widthOfOneElement = sliderRef.current.children[0].offsetWidth;
            const widthOfOneGutter = 16;

            setWidthToUse((activeIndex * widthOfOneElement) + widthOfOneGutter * activeIndex);
        }
    }, [ activeIndex ])

    return <div className="grid-container">
        <div className={"everyspace-landing-content-section"}>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <h1 className="heading shrink-on-small">What are you looking for?</h1>

                <div>
                    <button className={`waylf-button prev`} onClick={() => {
                        if(isDesktop) {
                            if (activeIndex !== 0) {
                                return setActiveIndex(activeIndex-1);
                            } else {
                                return setActiveIndex(4);
                            }
                        } else {
                            if (activeIndex !== 0) {
                                return setActiveIndex(activeIndex-1);
                            } else {
                                return setActiveIndex(5);
                            }
                        }
                    }}>
                        <i className="material-icons">keyboard_arrow_left</i>
                    </button>
                    <button className={`waylf-button next`} onClick={() => {
                        if(isDesktop) {
                            if (activeIndex !== 4) {
                                return setActiveIndex(activeIndex+1);
                            } else {
                                return setActiveIndex(0);
                            }
                        } else {
                            if (activeIndex !== 5) {
                                return setActiveIndex(activeIndex+1);
                            } else {
                                return setActiveIndex(0);
                            }
                        }
                    }}>
                        <i className="material-icons">keyboard_arrow_right</i>
                    </button>
                </div>
            </div>

            {/*// @ts-ignore*/}
            <div className="waylf-slider" ref={sliderRef}>
                {Slider.map((name, index) => {
                    let opacity = 0;
                    if(isDesktop) {
                        if(activeIndex === 0 && (index === 0 || index === 1)) {
                            opacity = 1;
                        }
                        if(activeIndex === 1 && (index === 1 || index === 2)) {
                            opacity = 1;
                        }
                        if(activeIndex === 2 && (index === 2 || index === 3)) {
                            opacity = 1;
                        }
                        if(activeIndex === 3 && (index === 3 || index === 4)) {
                            opacity = 1;
                        }
                        if(activeIndex === 4 && (index === 4 || index === 5)) {
                            opacity = 1;
                        }
                    } else {
                        if (index === activeIndex) {
                            opacity = 1
                        }
                    }

                    return <div className="waylf-card" key={index} style={{ opacity, transform: `translateX(${-widthToUse}px)`, transition: "opacity 450ms ease-in-out" }}>
                        <div className={"waylf-image " + name.replace(/\s+/g, '').toLowerCase()}>
                            <div className={"waylf-overlay"}/>
                            <h3 className="waylf-title">
                                Discover unique
                                <div />
                                {name}

                                <div style={{ height: 32 }} />

                                <button
                                    className="start-exploring-button"
                                    onClick={() => {
                                        if(window.innerWidth >= 1024) {
                                            HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: correspondingEvent[index]});
                                        } else {
                                            setOffCanvasEvent(correspondingEvent[index]);
                                        }
                                    }}
                                >
                                    Start Exploring
                                </button>
                            </h3>
                        </div>
                    </div>
                })}
            </div>

        </div>
    </div>
}