import { useQuery } from "react-query";
import { fetchGuildChannels } from "../../api";
import { useGuild } from "../App/useGuild";

export const ChannelSelector = ({ channel, setChannel }) => {
    const guild = useGuild();
    const { isSuccess, data } = useQuery(fetchGuildChannels(guild));

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