import React, {FunctionComponent, useEffect, useRef, useState} from "react"
// @ts-ignore
import { FlowRouter } from 'meteor/ostrio:flow-router-extra'
import {AllActivitiesModal} from "/imports/ui/components/modals/AllActivitiesModal";
import {
    HeaderSearchModal,
    HeaderSearchModalArgs,
    HeaderSearchModalEmitter
} from "/imports/ui/components/modals/HeaderSearchModal";
import _ from "lodash";
import {AutocompleteLocation} from "/imports/ui/hooks/useLocationsAutocomplete";
import {useOutsideClick} from "/imports/ui/hooks/useOutsideClick";

interface HeaderSearchAndActivitiesDropdownProps {
    routeName: string
    isTransparentHeader: boolean
}

interface PopularActivitiesModalProps {
    onSubmit: (activity: string) => void
    onClose: () => any
}


const PopularActivitiesModal: FunctionComponent<PopularActivitiesModalProps> = ({ onSubmit, onClose }) => {
    const [showActivitiesModal, setShowActivitiesModal] = useState(false);

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

    return <>
        {showActivitiesModal && <AllActivitiesModal onSubmit={(value) => {
            onSubmit(value);
            onClose();
        }} onClose={() => setShowActivitiesModal(false)}/>}

        <div className="relative-modal fixed-width popular-activities" style={{ zIndex: 6 }}>
            <div className="dropdown-header-card" style={{ paddingBottom: 16 }}>
                <div className="title-bar">
                    POPULAR ACTIVITIES
                </div>

                <div style={{ marginBottom: 12 }} />

                <div className="container-sm">
                    <div className="grid-style-buttons">
                        {_.map(popularActivities, activity => {
                            return <div key={`activity_${activity}`} onClick={() => {
                                onSubmit(activity);
                                onClose();
                            }}>
                                {activity}
                            </div>
                        })}
                    </div>
                    <button onClick={() => setShowActivitiesModal(true)} className="button honey expanded margin-bottom-0">All Activities</button>

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

        <div onClick={onClose} style={{ zIndex: 5, position: "fixed", inset: 0 }} />
    </>
}

export const HeaderSearchAndActivitiesDropdown: FunctionComponent<HeaderSearchAndActivitiesDropdownProps> = ({ routeName  }) => {
    const [revealed, setRevealed] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    const [showPopularActivitiesModal, setShowPopularActivitiesModal] = useState(false);

    const [selectedEvent, setSelectedEvent] = useState("");
    const [selectedLocation, setSelectedLocation] = useState<AutocompleteLocation>();

    const outsideClick = useOutsideClick(dropdownRef, () => {
        setRevealed(false);
        outsideClick.stopListening();
    });

    useEffect(() => {
        const onShowSearchModal = (data: HeaderSearchModalArgs) => {
            setRevealed(true);
            outsideClick.startListening();

            if(data.type === "event") {
                setSelectedEvent(data.event);
            } else {
                setSelectedLocation(data.location);
            }
        };

        const onShowAllActivitiesModal = () => outsideClick.stopListening();
        const onHideAllActivitiesModal = () => outsideClick.startListening();

        HeaderSearchModalEmitter.on("showAllActivitiesModal", onShowAllActivitiesModal);
        HeaderSearchModalEmitter.on("hideAllActivitiesModal", onHideAllActivitiesModal);
        HeaderSearchModalEmitter.on("showSearchModal", onShowSearchModal);
        return () => {
            HeaderSearchModalEmitter.off("showAllActivitiesModal", onShowAllActivitiesModal);
            HeaderSearchModalEmitter.off("hideAllActivitiesModal", onHideAllActivitiesModal);
            HeaderSearchModalEmitter.off("showSearchModal", onShowSearchModal);
            outsideClick.stopListening();
        }
    }, [])

    return <div className="child-container right-menu text-right">
        <div ref={dropdownRef} className="position-relative display-inline-block">
            <button onClick={() => {
                setRevealed(true);
                outsideClick.startListening();
            }} className={'drop-down-trigger-menu-button underline ' + (revealed ? 'active':'')}><i className="material-icons text-mint">search</i> Search</button>
            {revealed && <HeaderSearchModal location={selectedLocation} event={selectedEvent} onSubmitSearch={() => setRevealed(false)} />}
        </div>

        <div className="position-relative display-inline-block">
            <button onClick={() => setShowPopularActivitiesModal(!showPopularActivitiesModal)} className={'drop-down-trigger-menu-button underline ' + (showPopularActivitiesModal ? 'active':'')}>
                Activities <i className="material-icons">{showPopularActivitiesModal ? "keyboard_arrow_up":"keyboard_arrow_down"}</i>
            </button>
            {showPopularActivitiesModal && <PopularActivitiesModal onSubmit={(event) => {
                setSelectedEvent(event);
                setRevealed(true);
                outsideClick.startListening();
            }} onClose={() => setShowPopularActivitiesModal(false)}/>}
        </div>

        <a href='/create-account' className={'link underline white ' + (routeName === 'SignUp' || routeName === 'Register' ? 'active':'')}>Sign Up</a>
        <a href='/login' className={'link underline white ' + (routeName === 'Login' ? 'active':'')}>Log In</a>
        {/*{isTransparentHeader ? null:<a target="_blank" href="https://intercom.help/everyspace-/en" className='link underline white'>FAQs</a>}*/}
        <a href={FlowRouter.path('HostListingsActive')} className='link button mint' style={{ borderRadius: 8 }}>List Your Space</a>
    </div>
}