import React, {FunctionComponent, useState} from "react"
import {AllActivitiesModal} from "/imports/ui/components/modals/AllActivitiesModal";
import {HeaderSearchModalEmitter} from "/imports/ui/components/modals/HeaderSearchModal";

interface ActivitiesFooterListProps {}

export const ActivitiesFooterList: FunctionComponent<ActivitiesFooterListProps> = () => {

    const [viewingModal, setViewingModal] = useState(false);

    return <>
        <h4 className='hide-for-large-down'>Activities</h4>
        <ul className='footer-nav-link'>
            <li className="cursor-pointer-hover" onClick={() => HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: "Event"})}>
                <i className='material-icons footer-icon hide-for-large-up'>subdirectory_arrow_right</i>
                <span>Events</span>
            </li>
            <li className="cursor-pointer-hover" onClick={() => HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: "Meeting"})}>
                <i className='material-icons footer-icon hide-for-large-up'>subdirectory_arrow_right</i>
                <span>Meetings</span>
            </li>
            <li className="cursor-pointer-hover" onClick={() => HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: "Celebration"})}>
                <i className='material-icons footer-icon hide-for-large-up'>subdirectory_arrow_right</i>
                <span>Celebrations</span>
            </li>
            <li className="cursor-pointer-hover" onClick={() => HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: "Film Shoot"})}>
                <i className='material-icons footer-icon hide-for-large-up'>subdirectory_arrow_right</i>
                {/*<a href={FlowRouter.path("Search", {}, { cat: "mobile" })}>Mobile Spaces</a>*/}
                <span>Film & Photo Shoot</span>
            </li>
            <li>
                <i className='material-icons footer-icon hide-for-large-up'>subdirectory_arrow_right</i>
                {/*<a href={FlowRouter.path("Search", {}, { cat: "mobile" })}>Mobile Spaces</a>*/}
                <button onClick={() => setViewingModal(true)}><span>See all activities</span></button>
            </li>
        </ul>

        {viewingModal && <AllActivitiesModal onSubmit={(val) => {
            setViewingModal(false);
            HeaderSearchModalEmitter.emit("showSearchModal", { type: "event", event: val});
        }} onClose={() => setViewingModal(false)}/>}
    </>
}