import { useReminder } from "./ReminderContext";
import { useRef } from "preact/hooks";
import { Mentions } from "../App/Mentions";
import { useGuild } from "../App/useGuild";

export const Content = () => {
    const guild = useGuild();
    const [reminder, setReminder] = useReminder();
    const input = useRef(null);

    return (
        <>
            {guild && <Mentions input={input} />}
            <label class="is-sr-only">Content</label>
            <textarea
                class="message-input autoresize discord-content"
                placeholder="Content..."
                maxlength={2000}
                name="content"
                rows={1}
                ref={input}
                value={reminder.content}
                onInput={(ev) => {
                    setReminder((reminder) => ({
                        ...reminder,
                        content: ev.currentTarget.value,
                    }));
                }}
            ></textarea>
        </>
    );
};
