import { ImagePicker } from "../ImagePicker";
import { Reminder } from "../../../api";
import { Mentions } from "../../App/Mentions";
import { useRef } from "preact/hooks";
import { useGuild } from "../../App/useGuild";

type Props = {
    name: string;
    icon: string;
    setReminder: (r: (reminder: Reminder) => Reminder) => void;
};

export const Author = ({ name, icon, setReminder }: Props) => {
    const guild = useGuild();
    const input = useRef(null);

    return (
        <div class="embed-author-box">
            <div class="a">
                <p class="image is-24x24 customizable">
                    <ImagePicker
                        class="is-rounded embed_author_url"
                        url={icon}
                        alt="Image for embed author"
                        setImage={(url: string) => {
                            setReminder((reminder) => ({
                                ...reminder,
                                embed_author_url: url,
                            }));
                        }}
                    ></ImagePicker>
                </p>
            </div>

            <div class="b">
                {guild && <Mentions input={input} />}
                <label class="is-sr-only" for="embedAuthor">
                    Embed Author
                </label>
                <textarea
                    class="discord-embed-author message-input autoresize"
                    placeholder="Embed Author..."
                    rows={1}
                    ref={input}
                    maxlength={256}
                    name="embed_author"
                    value={name}
                    onInput={(ev) => {
                        setReminder((reminder) => ({
                            ...reminder,
                            embed_author: ev.currentTarget.value,
                        }));
                    }}
                ></textarea>
            </div>
        </div>
    );
};