import React, {FunctionComponent, useState} from "react"
import {useCSSGridSliderTransform} from "/imports/ui/hooks/useCSSGridSliderTransform";
import {AllActivitiesModal} from "/imports/ui/components/modals/AllActivitiesModal";
import {HeaderSearchModalEmitter} from "/imports/ui/components/modals/HeaderSearchModal";
import $ from "jquery";
import {setOffCanvasEvent} from "/imports/api/App/client/utils/setOffCanvasEvent";

interface SpaceForEveryEquationProps {

}

const Slider = [
    "Film Shoot",
    "Wedding",
    "Event",
    "Bridal Shower",
    "Baby Shower",
    "Celebration",
    "Photo Shoot",
    "Meeting",
    "Workshop",
    "Birthday Party",
    "Pop Up",
    "Function",
];

export const SpaceForEveryEquation: FunctionComponent<SpaceForEveryEquationProps> = () => {

    const [toggledNumber, setToggledNumber] = useState(window.innerWidth < 768 ? 0:10);
    const [hideStartCounter, setHideStartCounter] = useState(0);
    const [showActivitiesModal, setShowActivitiesModal] = useState(false);

    const [ transform, prev, next ] = useCSSGridSliderTransform({
        parentSelector: "#grid-slider-1",
        gridSelector: "#grid-slider-1 .grid-parent",
        blockSelector: "#grid-slider-1 .grid-block",
        runFromBreakpoint: 768,
        numOfColumns: 12,
        numOfColumnsToSlide: 1,
        responsive: {
            768: {
                numOfColumnsVisible: 3,
                maxPages: 10
            },
            916: {
                numOfColumnsVisible: 4,
                maxPages: 9
            },
            1024: {
                numOfColumnsVisible: 3,
                numOfColumns: 6,
                numOfColumnsToSlide: 1,
                maxPages: 4
            }
        }
    }, []);

    return <div className="grid-container padding-vertical-2">

        {showActivitiesModal && <AllActivitiesModal onSubmit={(value) => {
            if(window.innerWidth >= 1024) {
                HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: value});
            } else {
                setOffCanvasEvent(value);
            }
            setShowActivitiesModal(false);
        }} onClose={() => setShowActivitiesModal(false)}/>}

        <div className="photo-grid">
            <div className={"position-relative against-window-frame-on-tablet-right retain-padding-mobile"}>
                <div className="grid-x grid-margin-x">

                    <div className="cell small-12 large-4">
                        <div className="show-for-large carousal-spacer" />
                        <h2 className={'heading'}>A Space for <br className="hide-for-large-down" /> Every Occasion</h2>

                        <p className="sub-title text-left">
                            Discover & book unique South African <br className="hide-for-large-down" /> spaces - perfect for any activity.
                        </p>

                        <div className="slider-controls-custom">
                            <button className="see-all-activities-button show-for-large" onClick={() => {
                                setShowActivitiesModal(true);
                            }}>
                                See All Activities
                            </button>

                            <button className={`prev`} onClick={(evt) => {
                                if(window.innerWidth < 768) {
                                    if (toggledNumber === 0) {
                                        return setToggledNumber(2);
                                    }
                                    if (toggledNumber === 1) {
                                        return setToggledNumber(0);
                                    }
                                    if (toggledNumber === 2) {
                                        return setToggledNumber(1);
                                    }
                                } else {
                                    // @ts-ignore
                                    prev(evt)
                                    setHideStartCounter(hideStartCounter-1);
                                }
                            }}>
                                <i className="material-icons">keyboard_arrow_left</i>
                            </button>
                            <button className={`next`} onClick={(evt) => {
                                if(window.innerWidth < 768) {
                                    if (toggledNumber === 0) {
                                        return setToggledNumber(1);
                                    }
                                    if (toggledNumber === 1) {
                                        return setToggledNumber(2);
                                    }
                                    if (toggledNumber === 2) {
                                        return setToggledNumber(0);
                                    }
                                } else {
                                    // @ts-ignore
                                    next(evt);
                                    setHideStartCounter(hideStartCounter+1);
                                }
                            }}>
                                <i className="material-icons">keyboard_arrow_right</i>
                            </button>
                        </div>
                    </div>

                    <div className="cell small-12 large-8">
                        <div id="grid-slider-1" className="slider-wrapper">
                            {/*// @ts-ignore*/}
                            <div style={{ transform }} className={'grid-parent' + (toggledNumber < 1 ? " show-first-4": toggledNumber < 2 ? " show-first-8":toggledNumber < 3 ? " show-first-12": " show-all")}>
                                {Slider.map((name, index) => (
                                    <div className="grid-block cursor-pointer-hover" key={index}>
                                        <div onClick={() => {
                                            if(window.innerWidth >= 1024) {
                                                HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: name});
                                            } else {
                                                setOffCanvasEvent(name);
                                            }
                                        }} className={"image " + name.replace(/\s+/g, '').toLowerCase()}>
                                            <div className={"overlay"}/>
                                            <h3>{name}</h3>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>

                </div>

                <div className="cell small-12">
                    <button className="see-all-activities-button hide-for-large" onClick={() => {
                        setShowActivitiesModal(true);
                    }}>
                        See All Activities
                    </button>
                </div>

            </div>
        </div>
    </div>
}