1
import { QuickReplySet } from './QuickReplySet.js';
2

3
export class QuickReplySetLink {
4
    static from(props) {
5
        props.set = QuickReplySet.get(props.set);
6
        /**@type {QuickReplySetLink}*/
7
        const instance = Object.assign(new this(), props);
8
        return instance;
9
    }
10

11

12
    /**@type {QuickReplySet}*/ set;
13
    /**@type {Boolean}*/ isVisible = true;
14

15
    /**@type {Number}*/ index;
16

17
    /**@type {Function}*/ onUpdate;
18
    /**@type {Function}*/ onRequestEditSet;
19
    /**@type {Function}*/ onDelete;
20

21
    /**@type {HTMLElement}*/ settingsDom;
22

23

24
    renderSettings(idx) {
25
        this.index = idx;
26
        const item = document.createElement('div'); {
27
            this.settingsDom = item;
28
            item.classList.add('qr--item');
29
            item.setAttribute('data-order', String(this.index));
30
            const drag = document.createElement('div'); {
31
                drag.classList.add('drag-handle');
32
                drag.classList.add('ui-sortable-handle');
33
                drag.textContent = '☰';
34
                item.append(drag);
35
            }
36
            const set = document.createElement('select'); {
37
                set.classList.add('qr--set');
38
                // fix for jQuery sortable breaking childrens' touch events
39
                set.addEventListener('touchstart', (evt) => evt.stopPropagation());
40
                set.addEventListener('change', () => {
41
                    this.set = QuickReplySet.get(set.value);
42
                    this.update();
43
                });
44
                QuickReplySet.list.toSorted((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).forEach(qrs => {
45
                    const opt = document.createElement('option'); {
46
                        opt.value = qrs.name;
47
                        opt.textContent = qrs.name;
48
                        opt.selected = qrs == this.set;
49
                        set.append(opt);
50
                    }
51
                });
52
                item.append(set);
53
            }
54
            const visible = document.createElement('label'); {
55
                visible.classList.add('qr--visible');
56
                visible.title = 'Show buttons';
57
                const cb = document.createElement('input'); {
58
                    cb.type = 'checkbox';
59
                    cb.checked = this.isVisible;
60
                    cb.addEventListener('click', () => {
61
                        this.isVisible = cb.checked;
62
                        this.update();
63
                    });
64
                    visible.append(cb);
65
                }
66
                visible.append('Buttons');
67
                item.append(visible);
68
            }
69
            const edit = document.createElement('div'); {
70
                edit.classList.add('menu_button');
71
                edit.classList.add('menu_button_icon');
72
                edit.classList.add('fa-solid');
73
                edit.classList.add('fa-pencil');
74
                edit.title = 'Edit quick reply set';
75
                edit.addEventListener('click', () => this.requestEditSet());
76
                item.append(edit);
77
            }
78
            const del = document.createElement('div'); {
79
                del.classList.add('qr--del');
80
                del.classList.add('menu_button');
81
                del.classList.add('menu_button_icon');
82
                del.classList.add('fa-solid');
83
                del.classList.add('fa-trash-can');
84
                del.title = 'Remove quick reply set';
85
                del.addEventListener('click', () => this.delete());
86
                item.append(del);
87
            }
88
        }
89
        return this.settingsDom;
90
    }
91
    unrenderSettings() {
92
        this.settingsDom?.remove();
93
        this.settingsDom = null;
94
    }
95

96

97
    update() {
98
        if (this.onUpdate) {
99
            this.onUpdate(this);
100
        }
101
    }
102
    requestEditSet() {
103
        if (this.onRequestEditSet) {
104
            this.onRequestEditSet(this.set);
105
        }
106
    }
107
    delete() {
108
        this.unrenderSettings();
109
        if (this.onDelete) {
110
            this.onDelete();
111
        }
112
    }
113

114

115
    toJSON() {
116
        return {
117
            set: this.set.name,
118
            isVisible: this.isVisible,
119
        };
120
    }
121
}