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

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

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

    return (
        <div class="embed-footer-box">
            <p class="image is-20x20 customizable">
                <ImagePicker
                    class="is-rounded embed_footer_url"
                    url={icon}
                    alt="Footer profile-like image"
                    setImage={(url: string) => {
                        setReminder((reminder) => ({
                            ...reminder,
                            embed_footer_url: url,
                        }));
                    }}
                ></ImagePicker>
            </p>
            <label class="is-sr-only" for="embedFooter">
                Embed Footer text
            </label>
            {guild && <Mentions input={input} />}
            <textarea
                class="discord-embed-footer message-input autoresize "
                placeholder="Embed Footer..."
                maxlength={2048}
                name="embed_footer"
                rows={1}
                ref={input}
                value={footer}
                onInput={(ev) => {
                    setReminder((reminder) => ({
                        ...reminder,
                        embed_footer: ev.currentTarget.value,
                    }));
                }}
            ></textarea>
        </div>
    );
};