import React, {FunctionComponent, useEffect, useRef, useState} from "react"
import {HeaderSearchModalEmitter} from "/imports/ui/components/modals/HeaderSearchModal";
import $ from "jquery";
import {ActivitiesParentEnum} from "/imports/api/Activities/both/enums";

interface GetInspiredForYourNextBookingProps {

}

const activityToTitleMapping = {
    Gather: "Event",
    Create: ActivitiesParentEnum.FILM_SHOOT,
    Meet: ActivitiesParentEnum.MEETING,
    Celebrate: ActivitiesParentEnum.PARTY
}

// @ts-ignore
const ContentBlock = ({ active, imageURL, title, description, transform }) => {
    return <div className={`gifynb-card ${active && window.innerWidth < 1024 ? "active":""}`} style={{ transform: transform }}>
        <div className={`gifynb-image ${title === "Celebrate" ? "celebrate-image-adjust":""}`} style={{ backgroundImage: `url(${imageURL})` }} />

        <h4 className="gifynb-title">{title}</h4>

        <p className="gifynb-description">{description}</p>

        <div>
            <button onClick={() => {
                if(window.innerWidth >= 1024) {
                    // @ts-ignore
                    HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: activityToTitleMapping[title] })
                } else {
                    $("#offCanvasLeftOverlap").foundation("open", "onClick", this);
                    // @ts-ignore
                    if(window.toggleOffCanvasButton) {
                        // @ts-ignore
                        window.toggleOffCanvasButton();
                    }
                    // @ts-ignore
                    if(window.setOffCanvasEvent) {
                        // @ts-ignore
                        window.setOffCanvasEvent(activityToTitleMapping[title]);
                    }
                    // @ts-ignore
                    if(window.setShowSearchOptions) {
                        // @ts-ignore
                        window.setShowSearchOptions(true);
                    }
                }

            }} className="gifynb-button">Start Searching</button>
        </div>

    </div>
}

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

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

            if(activeIndex === 3) {
                setWidthToUse((activeIndex * widthOfOneElement))
            } else {
                setWidthToUse((activeIndex * widthOfOneElement) + widthOfOneGutter * activeIndex);
            }
        }
    }, [ activeIndex ])

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

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

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <h1 className="heading shrink-on-small">Get inspired for your next booking</h1>

                <div className="hide-for-large-up">
                    <button className="waylf-button prev" onClick={() => {
                        if (activeIndex !== 0) {
                            return setActiveIndex(activeIndex-1);
                        } else {
                            return setActiveIndex(3);
                        }
                    }}>
                        <i className="material-icons">keyboard_arrow_left</i>
                    </button>
                    <button className="waylf-button next" onClick={() => {
                        if (activeIndex !== 3) {
                            return setActiveIndex(activeIndex+1);
                        } else {
                            return setActiveIndex(0);
                        }
                    }}>
                        <i className="material-icons">keyboard_arrow_right</i>
                    </button>
                </div>

            </div>


            <div className="gifynb-slider" ref={sliderRef}>
                <ContentBlock transform={`translateX(${-widthToUse}px)`} active={activeIndex === 0} description={"Make unforgettable memories, together. From restaurants to rooftops, discover a world of spaces you’ll love."} imageURL={"/images/spaces/gather.jpg"} title={"Gather"} />
                <ContentBlock transform={`translateX(${-widthToUse}px)`} active={activeIndex === 1} description={"Bring your vision to life in truly unique film-friendly locations. No matter the need, our studios, luxury villas and even fairytale mansions are the perfect fit."} imageURL={"/images/spaces/create.jpg"} title={"Create"} />
                <ContentBlock transform={`translateX(${-widthToUse}px)`} active={activeIndex === 2} description={"Come together in boardrooms, meeting spaces, classrooms and more to create ideas that will change the world for the better. "} imageURL={"/images/spaces/meet.jpg"} title={"Meet"} />
                <ContentBlock transform={`translateX(${-widthToUse}px)`} active={activeIndex === 3} description={"Uncork the champagne, pop the streamers and celebrate with those closest to you. Explore backyards, farms, mansions and more from anywhere in the world."} imageURL={"/images/spaces/celebrate.jpg"} title={"Celebrate"} />
            </div>


        </div>
    </div>
}