<div class="editor_main_setting"
     id="editor_main_settings_font"
     x-data="fontSelectorComponent()"
     x-init="init()">
    <p class="ui_text_subheader_left">
        <i class="ph-bold ph-text-a-underline"></i> Font Style
    </p>
    <div class="ui_separator_horizontal"></div>
    <div id="editor_main_setting_font_selector">
        <div id="editor_main_setting_font_selector_top">
            <p class="ui_text_body" x-text="selected_font"></p>
            <button class="ui_button_small"
                    @click="selector_open = !selector_open"
                    x-html="selector_open === false ? 'Edit' : 'Close'"></button>
        </div>
        <div id="editor_main_setting_font_selector_items"
             x-show="selector_open"
             x-collapse>
            <template x-for="(font, index) in fonts" :key="index">
                <div class="editor_font_item">
                    <button class="ui_button_small"
                            @click="set_font_on_card(font.header.name, font.text.name, font.name); selector_open = false;">
                        <p class="ui_text_body" x-text="font.name" style="font-weight: 600;"></p>
                        <div class="editor_main_setting_font_selector_items_labels">
                            <p class="ui_text_body">Header</p>
                            <p class="ui_text_description">Text</p>
                        </div>
                        <div>
                            <p class="ui_text_body"
                               x-text="font.header.name"
                               :style='`font-family: "${font.header.name}"`'></p>
                            <p class="ui_text_description"
                               x-text="font.text.name"
                               :style='`font-family: "${font.text.name}"`'></p>
                        </div>
                    </button>
                </div>
            </template>
            <button class="ui_button_small"
                    @click="window.open('https://github.com/nfoert/cardie/wiki/Adding-new-font-styles')">
                <i class="ph-bold ph-arrow-square-out"></i> Contribute new font styles
            </button>
        </div>
    </div>
</div>
<script>
    function fontSelectorComponent() {
        return {
            selector_open: false,
            fonts: [],
            selected_font: "",

            load_all_fonts() {
                for (const font_style in this.fonts) {
                    const font_name = this.fonts[font_style].header.name;
                    const font_url = this.fonts[font_style].header.url;

                    window.dispatchEvent(new CustomEvent('loadFont', {
                        detail: { font_name, font_url }
                    }));
                }
            },

            set_font_on_card(header, text, style_name) {
                window.dispatchEvent(new CustomEvent('setFontOnCard', {
                    detail: { header, text, style_name }
                }));
                this.selected_font = style_name;
            },
            
            init() {
                window.addEventListener('sendFontStyles', (event) => {
                    event.stopImmediatePropagation();
                    const { font_styles } = event.detail;
                    this.fonts = font_styles;

                    this.load_all_fonts();
                });

                window.addEventListener('sendLoadedFontFromJson', (event) => {
                    event.stopImmediatePropagation();
                    const { font_style } = event.detail;
                    this.selected_font = font_style;
                });
            },
        };
    }
</script>
