import { useQuery } from "react-query";
import { QueryKeys } from "../../consts";
import { useParams } from "wouter";
import { fetchGuildChannels } from "../../api";

export const ChannelSelector = ({ channel }) => {
    const { guild } = useParams();

    const { isSuccess, data } = useQuery({
        queryKey: [QueryKeys.GUILD_CHANNELS, guild],
        queryFn: () => fetchGuildChannels(guild),
        staleTime: 300,
    });

    return (
        <div class="control has-icons-left">
            <div class="select">
                <select name="channel" class="channel-selector" value={channel}>
                    {isSuccess && data.map((c) => <option value={c.id}>{c.name}</option>)}
                </select>
            </div>
            <div class="icon is-small is-left">
                <i class="fas fa-hashtag"></i>
            </div>
        </div>
    );
};