import {Meteor} from "meteor/meteor";
import React, {FunctionComponent,  useEffect, useState} from "react";
import {useTracker} from "meteor/react-meteor-data";
import {LocationDocument, LocationsDB} from "/imports/api/Listings/both/collections/locations";
// @ts-ignore
import _ from "lodash";

interface FindLocationsDropdownProps {
    onSubmit: (location: Omit<LocationDocument, "polygon">) => void
    locationOpen: boolean
    toggleOpen: () => void
    location?: LocationDocument
    onMouseOverChange: (o: boolean) => void
}

export const FindLocationsDropdownContainer: FunctionComponent<FindLocationsDropdownProps> = ({ onSubmit, locationOpen, toggleOpen, location, onMouseOverChange }) => {

    const [chosenLocation, setChosenLocation] = useState<Omit<LocationDocument, "polygon">>();
    useEffect(() => setChosenLocation(location), [ location ]);

    const [, locations] = useTracker(() => {
        return [
            Meteor.subscribe("SearchLocations").ready(),
            LocationsDB.find({ isPublic: true }).fetch() as Omit<LocationDocument, "polygon">[]
        ];
    }, []);

    return <>
        <button onClick={() => toggleOpen()} className={`header-option first-child z-index-2 ${locationOpen ? "bg-charcoal text-white":"bg-off-white text-charcoal"}`}>
            {chosenLocation ? chosenLocation.name:"Cape Town"}
            <i className={`material-icons icon icon-left text-mint`}>search</i>
            <i className={`material-icons icon icon-right ${locationOpen ? "text-mint":"text-charcoal"}`}>{locationOpen ? 'expand_less': 'expand_more'}</i>
        </button>

        {locationOpen &&
            <div className="location-overlay">
                <div className="content">

                    <div className="search-mobile-button-dropdown">
                        <div className="heading bg-off-white text-grey title-bar">
                            <span className="show-for-medium">Current&nbsp;</span> <span>Available&nbsp;</span> <span className="show-for-medium">Everyspace&nbsp;</span> <span>Areas</span>
                        </div>
                    </div>

                    <div className="content-padding" onMouseLeave={() => onMouseOverChange(false)} onMouseEnter={() => onMouseOverChange(true)}>
                        <form onSubmit={(evt) => {
                            evt.preventDefault();
                            if(chosenLocation) {
                                onSubmit(chosenLocation);
                                // onTabOpen(evt);
                            }
                        }}>

                            {locations.map((location) => {
                                const isChecked = location._id === chosenLocation?._id;

                                return (
                                    <div className="form-group margin-bottom-0 padding-top-0" key={location._id}>
                                        <div className="checkbox mint">
                                            <input
                                                value={location._id}
                                                name={location.name}
                                                type="checkbox"
                                                // @ts-ignore
                                                checked={isChecked}
                                                id={location._id}
                                                onChange={() => {
                                                    setChosenLocation(location);
                                                    if (window.innerWidth > 640) {
                                                        onSubmit(location);
                                                        // onTabOpen(evt);
                                                    }
                                                }}
                                            />
                                            <label htmlFor={location._id}>
                                                <i className="material-icons">location_on</i>
                                                <span className="checkbox-title">{location.name}</span>
                                            </label>
                                        </div>
                                    </div>
                                )
                            })}

                            {
                                window.innerWidth <= 640 &&
                                <div className="submit-button-container">
                                    <button type="submit" className="button honey expanded">Search</button>
                                </div>
                            }

                        </form>
                    </div>

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