import React, {FunctionComponent} from "react";
// @ts-ignore
import { FlowRouter } from "meteor/ostrio:flow-router-extra";
import {useTracker} from "meteor/react-meteor-data";
import {Meteor} from "meteor/meteor";
import {LocationsDB} from "/imports/api/Listings/both/collections/locations";
import _ from "lodash";
import {HeaderSearchModalEmitter} from "/imports/ui/components/modals/HeaderSearchModal";

interface FooterPopularLocationsLinksProps {}

export const FooterPopularLocationsLinks: FunctionComponent<FooterPopularLocationsLinksProps> = ({}) => {

    const [loaded, popularLocations] = useTracker(() => {
        const ready = Meteor.subscribe("SearchLocations").ready();
        return [ready, LocationsDB.find({}, { limit: 5 }).fetch()];
    }, []);

    return <ul className='footer-nav-link'>
        {_.map(popularLocations, (location) => {
            return <li
                key={`footer_location_key_${location._id}`}
                className="cursor-pointer-hover"
                onClick={(evt) => HeaderSearchModalEmitter.emit("showSearchModal", { type: "popular", location: { location } }, evt)}>
                <i className='material-icons footer-icon hide-for-large-up'>subdirectory_arrow_right</i>
                {/*<a href={FlowRouter.path('Search', {}, { loc: loc._id })}>{loc.name}</a>*/}
                <span>{location.name}</span>
            </li>
        })}
    </ul>;
}