import { useQuery } from "react-query";
import { fetchGuildInfo } from "../../api";
import { GuildError } from "./GuildError";
import { createPortal, PropsWithChildren } from "preact/compat";
import { Import } from "../Import";
import { useGuild } from "../App/useGuild";

export const Guild = ({ children }: PropsWithChildren) => {
    const guild = useGuild();
    const { isSuccess, data: guildInfo } = useQuery(fetchGuildInfo(guild));

    if (!isSuccess) {
        return <></>;
    } else if (guildInfo.error) {
        return <GuildError />;
    } else {
        const importModal = createPortal(<Import />, document.getElementById("bottom-sidebar"));

        return (
            <>
                {importModal}
                {children}
            </>
        );
    }
};