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

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

    const [reminder, setReminder] = useReminder();

    const { isSuccess, data } = useQuery(fetchGuildChannels(guild));

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