import React, {FunctionComponent, useEffect, useRef, useState} from "react"
import {EveryspaceHeaderContainer} from "/imports/ui/components/landing/EveryspaceHeaderContainer";
import {EveryspaceHeroSlider} from "/imports/ui/components/landing/EveryspaceHeroSlider";
import {IconSearch} from "/imports/ui/components/icons/IconSearch";
import {IconLocationMarker} from "/imports/ui/components/icons/IconLocationMarker";
import {useTracker} from "meteor/react-meteor-data";
import {Meteor} from "meteor/meteor";
import {LocationOptionsComponent} from "/imports/ui/components/marketing/LocationOptionsComponent";
import {InnerModal} from "/imports/ui/components/modals/HeaderSearchModal";
import {getCoordinatesFromAutocompleteLocation} from "/imports/ui/hooks/useLocationsAutocomplete";
import {filtersToQueryParams} from "/imports/ui/components/listings/search/utils/url-filters";
// @ts-ignore
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import {useOutsideClickV2} from '/imports/ui/hooks/useOutsideClickV2'

interface LandingHeroProps {

}

export const LandingHero: FunctionComponent<LandingHeroProps> = () => {
    const [selectedCategory, setSelectedCategory] = useState("");
    const [selectedLocation, setSelectedLocation] = useState(null);

    const [eventOpen, setEventOpen] = useState(false);
    const [locationOpen, setLocationOpen] = useState(false);

    useEffect(() => {
        Meteor.call("listings.getDefaultSearchLocation", (err, location) => {
            setSelectedLocation(location);
        });
    }, []);

    const user = useTracker(() => Meteor.user(), []);
    let unreadMessageCount;

    if (user) {
        // @ts-ignore
        unreadMessageCount = user.unreadMessagesCount;
    }
    if(!unreadMessageCount) {
        unreadMessageCount = 0;
    }


    const locationName = selectedLocation
        ? selectedLocation.type === "google"
            ? selectedLocation.place.structured_formatting.main_text
            : selectedLocation.location.name
        :"Cape Town"

    const eventBoxRef = useRef(null);
    const locationBoxRef = useRef(null);
    const eventOutsideClick = useOutsideClickV2([eventBoxRef.current], () => {
        eventOutsideClick.stopListening();
        window.setTimeout(function () {
            setEventOpen(false);
        }, 50)
    });
    const locationOutsideClick = useOutsideClickV2([locationBoxRef.current], () => {
        locationOutsideClick.stopListening();
        setLocationOpen(false);
    });

    // @ts-ignore
    return <>
        <EveryspaceHeaderContainer unreadMessageCount={unreadMessageCount} />

        <div className="position-relative">
            <EveryspaceHeroSlider />

            <div className="inputs-spacer" />

            <div className="position-relative padding-top-1" style={{ zIndex: 10 }}>
                <div className="grid-container">
                    <div className="hero-search-interface">
                        <div className="position-relative event-input" ref={eventBoxRef}>

                            <div style={{ position: "absolute", inset: 0, zIndex: 1 }} onClick={() => {
                                setEventOpen(!eventOpen);
                                eventOutsideClick.startListening();
                            }} />

                            <div className="landing-dropdown">
                                <div className="icon-wrapper">
                                    <IconSearch />
                                </div>

                                <div className="content">
                                    <div className="title">What are you planning?</div>
                                    {/*@ts-ignore*/}
                                    <div className={`value ${selectedCategory !== "" ? "active":""}`}>{selectedCategory !== "" ? selectedCategory:"Baby Shower"}</div>
                                </div>


                                <i className="material-icons text-grey hide-for-medium">
                                    {eventOpen ?
                                        "expand_less"
                                        :
                                        "expand_more"
                                    }
                                </i>
                            </div>
                            {eventOpen && <InnerModal
                                minWidth={274}
                                onSubmit={(category) => {
                                    // @ts-ignore
                                    setSelectedCategory(category);
                                    setEventOpen(false);
                                }}
                                onClose={() => setEventOpen(false)}
                            />}
                        </div>

                        <div className="medium-diplay-flex location-input position-relative" ref={locationBoxRef}>
                            <div className="divider" />

                            <div style={{ position: "absolute", inset: 0, zIndex: 1 }} onClick={() => {
                                setLocationOpen(!locationOpen);
                                locationOutsideClick.startListening();
                            }} />

                            <div className="position-relative">
                                <div className="landing-dropdown">
                                    <div className="icon-wrapper">
                                        <IconLocationMarker />
                                    </div>

                                    <div className="content">
                                        <div className="title">Where?</div>
                                        {/*@ts-ignore*/}
                                        <div className={`value ${selectedLocation ? "active":""}`}>{locationName}</div>
                                    </div>


                                    <i className="material-icons text-grey hide-for-medium">
                                        {locationOpen ?
                                            "expand_less"
                                            :
                                            "expand_more"
                                        }
                                    </i>
                                </div>
                                {locationOpen && <LocationOptionsComponent
                                    selectedLocation={selectedLocation}
                                    onClose={() => setLocationOpen(false)}
                                    onChange={(location) => {
                                        setLocationOpen(false);
                                        setSelectedLocation(location);
                                    }} />
                                }
                            </div>
                        </div>


                        <div className="search-button-wrapper">
                            <button
                                disabled={!selectedLocation || !selectedCategory}
                                onClick={async () => {
                                const location = selectedLocation?.type === "popular"
                                    ? selectedLocation.location
                                    : {
                                        name: selectedLocation?.place.description,
                                        center: await getCoordinatesFromAutocompleteLocation(selectedLocation!)
                                    };

                                FlowRouter.go("Search", {}, filtersToQueryParams({
                                    location,
                                    activities: selectedCategory ? [selectedCategory]:null
                                }));
                            }} className="button mint expanded" style={{ borderRadius: 8, paddingTop: 11, paddingBottom: 12 }}>
                                <IconSearch /> Search
                            </button>
                        </div>
                    </div>

                    <div className="landing-activities-wrapper">
                        <span>Popular Activities</span>
                        <div onClick={() => setSelectedCategory("Film Shoot")} className="landing-activities-pill">Film Shoot</div>
                        <div onClick={() => setSelectedCategory("Workshop")} className="landing-activities-pill">Workshop</div>
                        <div onClick={() => setSelectedCategory("Conference")} className="landing-activities-pill">Conference</div>
                        <div onClick={() => setSelectedCategory("Bridal Shower")} className="landing-activities-pill">Bridal Shower</div>
                        <div onClick={() => setSelectedCategory("Event")} className="landing-activities-pill">Event</div>
                    </div>
                </div>
            </div>

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

        </div>
    </>
}