import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";
import { Footer } from "./Footer";
import { Color } from "./Color";
import { Fields } from "./Fields";
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
import { useReminder } from "../ReminderContext";

function intToColor(num: number) {
    return `#${num.toString(16).padStart(6, "0")}`;
}

const DEFAULT_COLOR = 9418359;

export const Embed = () => {
    const [reminder, setReminder] = useReminder();

    return (
        <div
            class="discord-embed"
            style={{
                borderLeftColor: intToColor(reminder.embed_color || DEFAULT_COLOR),
            }}
        >
            <div class="embed-body">
                <Color
                    color={intToColor(reminder.embed_color || DEFAULT_COLOR)}
                    setReminder={setReminder}
                ></Color>
                <div class="a">
                    <Author
                        name={reminder.embed_author}
                        icon={reminder.embed_author_url}
                        setReminder={setReminder}
                    ></Author>
                    <Title
                        title={reminder.embed_title}
                        onInput={(title: string) =>
                            setReminder((reminder: Reminder) => ({
                                ...reminder,
                                embed_title: title,
                            }))
                        }
                    ></Title>
                    <br></br>
                    <Description
                        description={reminder.embed_description}
                        onInput={(description: string) =>
                            setReminder((reminder: Reminder) => ({
                                ...reminder,
                                embed_description: description,
                            }))
                        }
                    ></Description>
                    <br></br>

                    <Fields />
                </div>

                <div class="b">
                    <p class="image thumbnail customizable">
                        <ImagePicker
                            class="embed_thumbnail_url"
                            url={reminder.embed_thumbnail_url}
                            alt="Square thumbnail embedded image"
                            setImage={() => {}}
                        ></ImagePicker>
                    </p>
                </div>
            </div>

            <p class="image is-400x300 customizable">
                <ImagePicker
                    class="embed_image_url"
                    url={reminder.embed_image_url}
                    alt="Large embedded image"
                    setImage={() => {}}
                ></ImagePicker>
            </p>

            <Footer
                footer={reminder.embed_footer}
                icon={reminder.embed_footer_url}
                setReminder={setReminder}
            ></Footer>
        </div>
    );
};