import React, {FunctionComponent} from 'react';
import {useTracker} from 'meteor/react-meteor-data';
// @ts-ignore
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

import {ListingsDB} from "../../../api/Listings/both/collections/listings";
import {Meteor} from "meteor/meteor";
import {EveryspaceHeader} from "/imports/ui/components/landing/EveryspaceHeader";


export const EveryspaceHeaderContainer: FunctionComponent<{unreadMessageCount: number}> = ({ unreadMessageCount }) => {

    const data = useTracker(() => {
        FlowRouter.watchPathChange();

        const userDataReady = Meteor.subscribe('userData').ready();
        const user = Meteor.user();
        const listingsReady = Meteor.subscribe("HostListings").ready();

        if (userDataReady && user) {
            const profileImageReady = Meteor.subscribe("Image", user.profile.profile_image_id).ready();
            let hasCreatedListing = ListingsDB.findOne({ createdBy: user._id }) !== undefined;

            return {
                userDataReady,
                profileImageReady,
                profile: user.profile,
                listingsReady,
                _id: user._id,
                routeName: FlowRouter.current().route.name,
                hasCreatedListing,
                user
            }
        } else {
            return {
                userDataReady,
                listingsReady,
                profileImageReady: false,
                profile: {
                    first_name: "Who",
                    last_name: "Dis"
                },
                routeName: FlowRouter.current().route.name
            }
        }
    }, [])

    // @ts-ignore
    return <EveryspaceHeader {...data} unreadMessageCount={unreadMessageCount} />
}