import React, {FunctionComponent, useEffect, useState} from "react"
import {AllActivitiesModal} from "/imports/ui/components/modals/AllActivitiesModal";
// @ts-ignore
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import {filtersToQueryParams} from "/imports/ui/components/listings/search/utils/url-filters";
import EventEmitter from "event-emitter";

import {
    AutocompleteLocation,
    getCoordinatesFromAutocompleteLocation,
    useLocationsAutocomplete
} from "/imports/ui/hooks/useLocationsAutocomplete";
import _ from "lodash";

export const HeaderSearchModalEmitter = EventEmitter();
export type HeaderSearchModalArgs =
    | { type: "location", location: AutocompleteLocation }
    | { type: "event", event: string }

interface InnerModalProps {
    onClose: () => void
    onSubmit: (value: any) => void
    minWidth?: number
}

export const InnerModal: FunctionComponent<InnerModalProps> = ({ onSubmit, onClose, minWidth }) => {

    const [activitiesModal, setActivitiesModal] = useState(false)

    return <div style={{ top: "calc(100% + 12px)", minWidth }} className="relative-modal">
        {activitiesModal && <AllActivitiesModal onSubmit={value => {
            HeaderSearchModalEmitter.emit("hideAllActivitiesModal");
            setActivitiesModal(false);

            onClose();
            onSubmit(value);
        }} onClose={() => {
            HeaderSearchModalEmitter.emit("hideAllActivitiesModal");
            setActivitiesModal(false)
        }}/>}

        <div className="dropdown-header-card" style={{ zIndex: 6, paddingBottom: 4 }}>
            <div className="title-bar">
                WHAT ARE YOU PLANNING
            </div>
            <div style={{ marginBottom: 12 }} />

            <div className="container-sm">
                <div className="grid-style-buttons">
                    <div onClick={() => {
                        onSubmit("Event");
                        onClose();
                    }}>
                        Event
                    </div>

                    <div onClick={() => {
                        onSubmit("Celebration");
                        onClose();
                    }}>
                        Celebration
                    </div>

                    <div onClick={() => {
                        onSubmit("Film Shoot");
                        onClose();
                    }}>
                        Film Shoot
                    </div>

                    <div onClick={() => {
                        onSubmit("Wedding");
                        onClose();
                    }}>
                        Wedding
                    </div>

                    <div onClick={() => {
                        onSubmit("Meeting");
                        onClose();
                    }}>
                        Meeting
                    </div>
                    <button onClick={() => {
                        HeaderSearchModalEmitter.emit("showAllActivitiesModal");
                        setActivitiesModal(true)
                    }} className="button honey padding-0">All Activities</button>
                </div>

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



interface SearchAddressInputProps {
    location?: AutocompleteLocation
    setLocation: (location?: AutocompleteLocation) => any
    keepInputEmpty?: boolean
}

export const SearchAddressInput: FunctionComponent<SearchAddressInputProps> = ({ keepInputEmpty = false, location, setLocation }) => {

    const locationsAutocomplete = useLocationsAutocomplete();
    useEffect(() => {
        if(!keepInputEmpty) {
            locationsAutocomplete.setSelectedLocation(location);
        }
    }, [JSON.stringify(location)]);

    return <div className="header-search-modal-address-input">
        <div className="form-group">

            <input type="text"
                {...locationsAutocomplete.input}
                className={'truncate ' + (locationsAutocomplete.input.value ? "not-empty":"")} />

            <label>Where?</label>

            <span className={`centerY icon-over-input-right ${locationsAutocomplete.input.value ? "visible":"invisible"}`}>
                <i className='material-icons close' onClick={() => {
                    setLocation(undefined);
                    locationsAutocomplete.clearInput()
                }}>close</i>
            </span>
        </div>

        {locationsAutocomplete.inputHasFocus && !locationsAutocomplete.selectedLocation &&
            <div style={{ top: "calc(100% + 12px)" }} className={`relative-modal`}>
                {/*<div className={`relative-modal`}>*/}
                <div className="dropdown-header-card padding-top-0" style={{ zIndex: 6, paddingBottom: 0 }}>

                    {locationsAutocomplete.input.value === ""
                        ? <>
                            <div style={{ height: 16 }} />
                            <div className="title-bar">
                                POPULAR LOCATIONS
                            </div>

                            {_.map(locationsAutocomplete.popularLocations, (location) =>
                                <div key={location._id}
                                     onClick={() => {
                                         setLocation({ type: "popular", location });
                                         locationsAutocomplete.clearInput();
                                     }}
                                     className="location-list-invert-on-hover">
                                    <i className="material-icons">place</i>
                                    {location.name}
                                </div>
                            )}
                        </>
                        : <>
                            {_.map(locationsAutocomplete.predictions, (place) =>
                                <div key={place.place_id}
                                     className={'location-list-invert-on-hover'}
                                     onClick={(evt) => {
                                         evt.preventDefault();
                                         setLocation({ type: "google", place });
                                         locationsAutocomplete.clearInput();
                                     }}>
                                    <span><i className='material-icons selectable pin'>place</i></span>
                                    <strong className='main-text'>{place.structured_formatting.main_text} </strong>
                                    &nbsp;
                                    <span className="sub-text">{place.structured_formatting.secondary_text}</span>
                                </div>
                            )}
                        </>
                    }
                </div>
            </div>
        }
    </div>
}


interface HeaderSearchModalProps {
    event?: string
    location?: AutocompleteLocation
    onSubmitSearch?: Function
}

export const HeaderSearchModal: FunctionComponent<HeaderSearchModalProps> = ({ event = "", location, onSubmitSearch = () => null  }) => {

    const [showInnerModal, setShowInnerModal] = useState(false);
    const [selectedEvent, setSelectedEvent] = useState(event);
    const [selectedLocation, setSelectedLocation] = useState<AutocompleteLocation | undefined>(location);

    useEffect(() => setSelectedEvent(event), [ event ]);
    useEffect(() => setSelectedLocation(location), [ JSON.stringify(location) ]);

    const searchButtonDisabled = !selectedEvent || !selectedLocation;

    return <div style={{ left: "50%", transform: "translateX(-50%)" }} className="relative-modal fixed-width">
        <div className="dropdown-header-card" style={{ zIndex: 6 }}>
            <div className="title-bar">
                FIND A SPACE
            </div>

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

            <div className="container">
                <div className={`form-group`}>
                    <div onClick={() => setShowInnerModal(!showInnerModal)}
                        style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
                        className={`form-input cursor-pointer-hover ${selectedEvent !== "" ? "not-empty":""}`}>

                        {selectedEvent ? selectedEvent:<span style={{ height: 20 }} />}
                        <i className="material-icons">{!showInnerModal ? "keyboard_arrow_down":"keyboard_arrow_up"}</i>

                    </div>
                    <label>What are you planning?</label>
                    <div className={`${showInnerModal ? "":"hide"}`}>
                        <InnerModal onClose={() => setShowInnerModal(false)} onSubmit={(value: string) => setSelectedEvent(value)} />
                    </div>

                </div>

                <SearchAddressInput location={selectedLocation} setLocation={(location) => setSelectedLocation(location)} />

                <div>
                    <button
                        onClick={async () => {
                            if(searchButtonDisabled) return;

                            const location = selectedLocation?.type === "popular"
                                ? selectedLocation.location
                                : {
                                    name: selectedLocation?.place.description,
                                    center: await getCoordinatesFromAutocompleteLocation(selectedLocation!)
                                };

                            FlowRouter.go("Search", {}, filtersToQueryParams({
                                location,
                                activities: selectedEvent ? [selectedEvent]:null
                            }));

                            onSubmitSearch();
                        }}
                        style={{ marginBottom: 0, height: 50 }} className={`button honey expanded ${searchButtonDisabled ? "disabled":""}`}>
                        Search
                    </button>
                </div>

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