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

function colorToInt(hex: string) {
    return parseInt(hex.substring(1), 16);
}

export const Embed = ({ reminder, setReminder }) => {
    return (
        <div class="discord-embed">
            <div class="embed-body">
                <Color
                    color={reminder.embed_color}
                    onChange={(color: string) => {
                        setReminder((reminder: Reminder) => ({
                            ...reminder,
                            embed_color: colorToInt(color),
                        }));
                    }}
                ></Color>
                <div class="a">
                    <Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
                    <Title
                        title={reminder.embed_title}
                        onChange={(title: string) =>
                            setReminder((reminder: Reminder) => ({
                                ...reminder,
                                embed_title: title,
                            }))
                        }
                    ></Title>
                    <br></br>
                    <Description
                        description={reminder.embed_description}
                        onChange={(description: string) =>
                            setReminder((reminder: Reminder) => ({
                                ...reminder,
                                embed_description: description,
                            }))
                        }
                    ></Description>
                    <br></br>

                    <div class="embed-multifield-box">
                        <div data-inlined="1" class="embed-field-box">
                            <label class="is-sr-only" for="embedFieldTitle">
                                Field Title
                            </label>
                            <div class="is-flex">
                                <textarea
                                    class="discord-field-title field-input message-input autoresize"
                                    placeholder="Field Title..."
                                    rows={1}
                                    maxlength={256}
                                    name="embed_field_title[]"
                                ></textarea>
                                <button class="button is-small inline-btn">
                                    <span class="is-sr-only">Toggle field inline</span>
                                    <i class="fas fa-arrows-h"></i>
                                </button>
                            </div>

                            <label class="is-sr-only" for="embedFieldValue">
                                Field Value
                            </label>
                            <textarea
                                class="discord-field-value field-input message-input autoresize "
                                placeholder="Field Value..."
                                maxlength={1024}
                                name="embed_field_value[]"
                                rows={1}
                            ></textarea>
                        </div>
                    </div>
                </div>

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

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

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