import React, {FunctionComponent, useEffect, useState} from "react"
import Tooltip from "/imports/ui/components/general/Tooltip";
import FilteredListingsContainer from "/imports/ui/containers/listings/FilteredListingsContainer";
import {SpacesTags} from "/imports/ui/components/listings/search/SpacesTags";
// @ts-ignore
import { FlowRouter } from "meteor/ostrio:flow-router-extra";
import NewsletterSignUpFormContainer from "/imports/ui/containers/users/NewsletterSignUpFormContainer";
import Pagination from "/imports/ui/components/listings/search/Pagination";
import {Tracker} from "meteor/tracker";
import Footer from "/imports/ui/components/general/Footer";
import {SearchPageListingsFilters} from "/imports/ui/components/listings/search/SearchPageListingsFilters";
import {getUrlFilters, SearchFilters, setUrlFilters} from "/imports/ui/components/listings/search/utils/url-filters";
import {ParentFromSubActivity} from "/imports/api/Activities/both/enums";

const PAGE_SIZE = 12;
const ITEMS_PER_ROW = 3;

interface SearchPageProps {}

export const SearchPage: FunctionComponent<SearchPageProps> = () => {

    const [viewingMap, setViewingMap] = useState(false);
    const [mapListings, setMapListings] = useState([]);

    const initialFilters = {
        types: [],
        styles: [],
        activities: [],
        amenities: [],
        exactAttendees: null,
        attendeeRange: null,
        location: null,
        priceFrom: null,
        priceTo: null,
        spacesTagId: null,
        page: 0
    }

    const [filters, setFilters] = useState<SearchFilters>(initialFilters);
    const [count, _setCount] = useState(0);

    const onResize = () => {
        if (window.innerWidth >= 1024) {
            setViewingMap(false);
        }
    }

    useEffect(() => {
        window.addEventListener("resize", onResize);
        return () => window.removeEventListener("resize", onResize);
    }, [ ]);

    useEffect(() => {
        const computation = Tracker.autorun(async () => {
            FlowRouter.watchPathChange();
            setFilters({ ...initialFilters, ...getUrlFilters() });
        });
        return () => computation.stop();
    }, []);

    const parentActivity = filters.activities && filters.activities.length
        ? ParentFromSubActivity[filters.activities[0]]
        : null;

    return <div style={{ position: "relative", zIndex: 40 }}>

        <div className="listing-search-container">
            <SearchPageListingsFilters
                filters={filters}
                mapListings={mapListings}
                setViewingMap={setViewingMap}
                viewingMap={viewingMap}
            />
        </div>

        {!viewingMap && <>
            <SpacesTags
                filter={
                    parentActivity
                        ? { activities: parentActivity }
                        : {}
                }
                selected={filters.spacesTagId}
                onChange={(spacesTagId) => {
                    setUrlFilters({ spacesTagId });
                }}
            />

            <FilteredListingsContainer
                {...filters}

                setMapListings={(locations: any) => setMapListings(locations)}
                count={count}
                location={filters.location}
                pageSize={PAGE_SIZE}
                itemsPerRow={ITEMS_PER_ROW}
                renderHalfway={<NewsletterSignUpFormContainer />}
                renderAfterExactResults={
                    <div className='article-wrapper'>
                        <div className="article-excerpt-block article-won-challenge-excerpt">
                            <div className='excerpt-content'>
                                <h2 className='title'>You’ve won the secret Everyspace challenge!</h2>

                                <div className='divider'/>

                                <span className='text'>
                                And by this, we mean you’ve found every listing matching your search criteria. Try
                                broadening your filters or taking a look at similar listings below.
                             </span>

                                <div className='display-block text-center emojis'>
                                    <img className='emoji small no-margin-bottom' src="/images/party.png" alt="emoji"/>
                                    <img className='emoji big no-margin-bottom' src="/images/latin-dancer.png" alt="emoji"/>
                                    <img className='emoji big no-margin-bottom' src="/images/guy.png" alt="emoji"/>
                                    <img className='emoji small no-margin-bottom' src="/images/party.png" alt="emoji"/>
                                </div>
                            </div>
                        </div>
                    </div>
                }
                renderBeforeSimilarResults={
                    <div className='similar-results'>
                        <div>
                            <h2 className='header'>Similar Results</h2>
                            <Tooltip
                                options={{ position: 'top', alignment: 'center' }}
                                toolTipText={"The spaces below matches the main category chosen."}
                                render={(ref: React.LegacyRef<HTMLButtonElement> | undefined) => (
                                    <button
                                        type='button'
                                        ref={ref}
                                        className="mobile-listing-tooltip">
                                        <i className="material-icons text-light-grey">info</i>
                                    </button>
                                )} />
                        </div>
                        <hr />
                    </div>
                }
                renderPagination={(count: any) => (
                    <Pagination page={filters.page} pageSize={PAGE_SIZE} count={count} onChange={(page: number) => setUrlFilters({ page })} />
                )} />

            <div className="search-page-footer-button-container show-for-medium">
                {/*// @ts-ignore*/}
                <Footer.FooterStaticToggleButton />
            </div>
        </>
        }
    </div>
}