import * as React from "react";
import { useState } from "react";
import { useSiteSettings } from "../providers/site";
import useChannelSelect from "../components/channel-select/hooks/use-channel-select";
import useGetAbsoluteUrl from "./use-get-absolute-url";
import { useFirebases } from "./use-firebase/useFirebase";
import { ChannelItem } from "../components/channel";

function useChannelSelectFirebase() {
  const {
    regions: {
      "channel-select": { pages },
    },
  } = useSiteSettings();
  const fetchedPages = useFirebases<ChannelItem>(
    pages.map((page) => `/objects/${page.page._id}`)
  );

  const [navigation, setNavigation] = useState();

  const getAbsoluteUrl = useGetAbsoluteUrl();
  const {
    channelSelect,
    open: openChannelSelect,
    currentChannel,
  } = useChannelSelect(
    fetchedPages
      .filter(({ loading }) => !loading)
      .map(({ data: channel }) => ({
        title: channel.seo.title,
        imgUri: getAbsoluteUrl(
          channel.data.channel_select_active_image_url || ""
        ),
        metadata: channel,
      })),
    (channel) => {
      if (navigation)
        (navigation as any).push("page-view", {
          pageId: (channel.metadata as any)._id,
        });
    }
  );

  return {
    navigation,
    setNavigation,
    channelSelect,
    openChannelSelect,
    currentChannel,
  };
}

export default useChannelSelectFirebase;