1
import { animation_duration } from '../../../../../script.js';
2
import { dragElement } from '../../../../RossAscends-mods.js';
3
import { loadMovingUIState } from '../../../../power-user.js';
4
import { QuickReplySettings } from '../QuickReplySettings.js';
5

6
export class ButtonUi {
7
    /** @type {QuickReplySettings} */ settings;
8

9
    /**@type {HTMLElement}*/ dom;
10
    /**@type {HTMLElement}*/ popoutDom;
11

12

13
    constructor(/**@type {QuickReplySettings}*/settings) {
14
        this.settings = settings;
15
    }
16

17

18
    render() {
19
        if (this.settings.isPopout) {
20
            return this.renderPopout();
21
        }
22
        return this.renderBar();
23
    }
24
    unrender() {
25
        this.dom?.remove();
26
        this.dom = null;
27
        this.popoutDom?.remove();
28
        this.popoutDom = null;
29
    }
30

31
    show() {
32
        if (!this.settings.isEnabled) return;
33
        if (this.settings.isPopout) {
34
            document.body.append(this.render());
35
            loadMovingUIState();
36
            $(this.render()).fadeIn(animation_duration);
37
            dragElement($(this.render()));
38
        } else {
39
            const sendForm = document.querySelector('#send_form');
40
            if (sendForm.children.length > 0) {
41
                sendForm.children[0].insertAdjacentElement('beforebegin', this.render());
42
            } else {
43
                sendForm.append(this.render());
44
            }
45
        }
46
    }
47
    hide() {
48
        this.unrender();
49
    }
50
    refresh() {
51
        this.hide();
52
        this.show();
53
    }
54

55

56
    renderBar() {
57
        if (!this.dom) {
58
            let buttonHolder;
59
            const root = document.createElement('div'); {
60
                this.dom = root;
61
                buttonHolder = root;
62
                root.id = 'qr--bar';
63
                root.classList.add('flex-container');
64
                root.classList.add('flexGap5');
65
                if (this.settings.showPopoutButton) {
66
                    root.classList.add('popoutVisible');
67
                    const popout = document.createElement('div'); {
68
                        popout.id = 'qr--popoutTrigger';
69
                        popout.classList.add('menu_button');
70
                        popout.classList.add('fa-solid');
71
                        popout.classList.add('fa-window-restore');
72
                        popout.addEventListener('click', () => {
73
                            this.settings.isPopout = true;
74
                            this.refresh();
75
                            this.settings.save();
76
                        });
77
                        root.append(popout);
78
                    }
79
                }
80
                if (this.settings.isCombined) {
81
                    const buttons = document.createElement('div'); {
82
                        buttonHolder = buttons;
83
                        buttons.classList.add('qr--buttons');
84
                        root.append(buttons);
85
                    }
86
                }
87
                [...this.settings.config.setList, ...(this.settings.chatConfig?.setList ?? []), ...(this.settings.charConfig?.setList ?? [])]
88
                    .filter(link => link.isVisible)
89
                    .forEach(link => buttonHolder.append(link.set.render()))
90
                ;
91
            }
92
        }
93
        return this.dom;
94
    }
95

96

97
    renderPopout() {
98
        if (!this.popoutDom) {
99
            let buttonHolder;
100
            const root = document.createElement('div'); {
101
                this.popoutDom = root;
102
                root.id = 'qr--popout';
103
                root.classList.add('qr--popout');
104
                root.classList.add('draggable');
105
                const head = document.createElement('div'); {
106
                    head.classList.add('qr--header');
107
                    root.append(head);
108
                    const controls = document.createElement('div'); {
109
                        controls.classList.add('qr--controls');
110
                        controls.classList.add('panelControlBar');
111
                        controls.classList.add('flex-container');
112
                        const drag = document.createElement('div'); {
113
                            drag.id = 'qr--popoutheader';
114
                            drag.classList.add('fa-solid');
115
                            drag.classList.add('fa-grip');
116
                            drag.classList.add('drag-grabber');
117
                            drag.classList.add('hoverglow');
118
                            controls.append(drag);
119
                        }
120
                        const close = document.createElement('div'); {
121
                            close.classList.add('qr--close');
122
                            close.classList.add('fa-solid');
123
                            close.classList.add('fa-circle-xmark');
124
                            close.classList.add('hoverglow');
125
                            close.addEventListener('click', () => {
126
                                this.settings.isPopout = false;
127
                                this.refresh();
128
                                this.settings.save();
129
                            });
130
                            controls.append(close);
131
                        }
132
                        head.append(controls);
133
                    }
134
                }
135
                const body = document.createElement('div'); {
136
                    buttonHolder = body;
137
                    body.classList.add('qr--body');
138
                    if (this.settings.isCombined) {
139
                        const buttons = document.createElement('div'); {
140
                            buttonHolder = buttons;
141
                            buttons.classList.add('qr--buttons');
142
                            body.append(buttons);
143
                        }
144
                    }
145
                    [...this.settings.config.setList, ...(this.settings.chatConfig?.setList ?? []), ...(this.settings.charConfig?.setList ?? [])]
146
                        .filter(link => link.isVisible)
147
                        .forEach(link => buttonHolder.append(link.set.render()))
148
                    ;
149
                    root.append(body);
150
                }
151
            }
152
        }
153
        return this.popoutDom;
154
    }
155
}