// 自定义字体大小模块，支持预设选项和输入框
export class CustomFontSize {
    constructor(quill, options) {
        this.quill = quill;
        this.options = options;

        // 创建工具栏容器
        const container = quill.getModule("toolbar").container;

        // 创建字体大小选择器
        this.selector = document.createElement("select");
        this.selector.classList.add("ql-size");

        // 添加预设选项
        options.presets.forEach(size => {
            if (size === false) {
                // 添加分隔线
                const option = document.createElement("option");
                option.disabled = true;
                option.innerHTML = "──────────";
                this.selector.appendChild(option);
            } else {
                // 添加预设大小选项
                const option = document.createElement("option");
                option.value = size;
                option.innerHTML = this.getSizeLabel(size);
                this.selector.appendChild(option);
            }
        });

        // 添加自定义输入选项
        const inputOption = document.createElement("option");
        inputOption.value = "custom";
        inputOption.innerHTML = "自定义";
        this.selector.appendChild(inputOption);

        // 创建自定义输入框
        this.input = document.createElement("input");
        this.input.type = "number";
        this.input.placeholder = "输入字号";
        this.input.min = 1;
        this.input.style.width = "50px";
        this.input.style.display = "none"; // 默认隐藏

        // 将选择器和输入框添加到工具栏
        container.appendChild(this.selector);
        container.appendChild(this.input);

        // 绑定事件
        this.selector.addEventListener("change", this.onSelectChange.bind(this));
        this.input.addEventListener("change", this.onInputChange.bind(this));
        this.quill.on("text-change", this.update.bind(this));

        // 初始化
        this.update();
    }

    // 获取大小标签
    getSizeLabel(size) {
        const labels = {
            small: "小",
            normal: "正常",
            large: "大",
            huge: "超大"
        };
        return labels[size] || size;
    }

    // 选择器变更事件
    onSelectChange() {
        const value = this.selector.value;

        if (value === "custom") {
            // 显示输入框
            this.input.style.display = "inline-block";
            this.input.focus();
        } else {
            // 隐藏输入框并应用选择的大小
            this.input.style.display = "none";
            this.quill.format("size", value);
        }
    }

    // 输入框变更事件
    onInputChange() {
        const value = this.input.value;
        if (value) {
            this.quill.format("size", `${value}px`);
        }
        // 选择"自定义"选项，保持输入框显示
        this.selector.value = "custom";
    }

    // 更新当前选中状态
    update() {
        const selection = this.quill.getSelection();
        if (selection) {
            const [format] = this.quill.getFormat(selection.index, 1);
            const size = format.size;

            if (size && size.endsWith("px")) {
                const sizeValue = size.replace("px", "");
                this.input.value = sizeValue;

                // 如果是预设值，选中对应的选项
                if (this.options.presets.includes(size)) {
                    this.selector.value = size;
                    this.input.style.display = "none";
                } else {
                    // 否则选中"自定义"并显示输入框
                    this.selector.value = "custom";
                    this.input.style.display = "inline-block";
                }
            } else {
                // 没有选中的大小，重置为默认
                this.selector.value = "normal";
                this.input.style.display = "none";
            }
        }
    }
}

// // 注册自定义模块
// Quill.register("modules/customFontSize", CustomFontSize);
