import React, {FunctionComponent, useEffect, useRef, useState} from "react";
import {HeaderSearchModalEmitter} from "/imports/ui/components/modals/HeaderSearchModal";
import {
    getAutocompleteLocationFromLocationString
} from "/imports/ui/hooks/useLocationsAutocomplete";
import $ from "jquery";

interface DiscoverSpacesAcrossSouthAfricaProps {

}


// @ts-ignore
const ContentBlock = ({ imageUrl, title }) => {
    return <>
        <div onClick={async () => {
            if(window.innerWidth >= 1024) {
                HeaderSearchModalEmitter.emit("showSearchModal", { location: { type: "google", place: await getAutocompleteLocationFromLocationString(title) } })
            } else {
                $("#offCanvasLeftOverlap").foundation("open", "onClick", this);
                // @ts-ignore
                if(window.toggleOffCanvasButton) {
                    // @ts-ignore
                    window.toggleOffCanvasButton()
                }
                // @ts-ignore
                if(window.setShowSearchOptions) {
                    // @ts-ignore
                    window.setShowSearchOptions(true);
                }
                // @ts-ignore
                if(window.setOffCanvasLocation) {
                    // @ts-ignore
                    window.setOffCanvasLocation({ type: "google", place: await getAutocompleteLocationFromLocationString(title) })
                }
            }

        }} className="dsasa-card" style={{ backgroundImage: `url(${imageUrl})` }}>
            <div className="dsasa-overlay" />
            <h4 className="dsasa-title">{title}</h4>
        </div>
    </>
}

export const DiscoverSpacesAcrossSouthAfrica: FunctionComponent<DiscoverSpacesAcrossSouthAfricaProps> = () => {
    const containerRef = useRef(null);

    const [activeIndex, setActiveIndex] = useState(0);
    const [widthToUse, setWidthToUse] = useState(window.innerWidth < 1024 ? window.innerWidth - 32:580);

    useEffect(() => {
        if(containerRef.current) {
            // @ts-ignore
            const widthOfOneElement = containerRef.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">
        <div className={"everyspace-landing-content-section"}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <h1 className="heading shrink-on-small">Discover Spaces Across South Africa</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="dsasa-slider" ref={containerRef}>
                <div style={{ transform: `translate3d(${-widthToUse}px, 0, 0)` }}>
                    <ContentBlock title={"Stellenbosch"} imageUrl={"/images/landing-discover-spaces/stellenbosch.jpg"} />
                </div>

                <div style={{ transform: `translate3d(${-widthToUse}px, 0, 0)` }}>
                    <ContentBlock title={"Camps Bay"} imageUrl={"/images/landing-discover-spaces/camps-bay.jpg"} />
                </div>

                <div style={{ transform: `translate3d(${-widthToUse}px, 0, 0)` }}>
                    <ContentBlock title={"Cape Town"} imageUrl={"/images/landing-discover-spaces/cape-town.jpg"} />
                </div>

                <div style={{ transform: `translate3d(${-widthToUse}px, 0, 0)` }}>
                    <ContentBlock title={"Joburg"} imageUrl={"/images/landing-discover-spaces/joburg.jpg"} />
                </div>
            </div>

        </div>
    </div>
}