// utils.js
import { MarkdownToHtml } from '@ckeditor/ckeditor5-markdown-gfm/src/markdown2html/markdown2html.js';
import { HtmlToMarkdown } from '@ckeditor/ckeditor5-markdown-gfm/src/html2markdown/html2markdown.js';
// 获取用户配置
export function getUserConfigFromBackend() {
    // TODO 请求用户样式



    const options = {};
    // 字体、字号、样式
    const {
        fontFamilyOptions = [
            'default',
            '宋体',
            '新宋体',
            '仿宋',
            '楷体',
            '微软雅黑',
            '黑体',
            '华文仿宋',
            '华文楷体',
            '华文隶书',
            '华文宋体',
            '华文细黑',
            '华文新魏',
            '华文行楷',
            '华文中宋',
            '隶书',
            '苹方 常规',
            '幼圆',
            'Times New Roman'
        ],
        // 五号，小四，四号，小三，三号，小二，二号
        fontSizeOptions = [14, 'default', 16, 18.6, 20, 21.3, 24, 29.3],
        styleDefinitions = [
            {
                name: 'Article category',
                element: 'h3',
                classes: ['category']
            },
            {
                name: 'Title',
                element: 'h2',
                classes: ['document-title']
            },
            {
                name: 'Subtitle',
                element: 'h3',
                classes: ['document-subtitle']
            },
            {
                name: 'Info box',
                element: 'p',
                classes: ['info-box']
            },
            {
                name: 'Side quote',
                element: 'blockquote',
                classes: ['side-quote']
            },
            {
                name: 'Marker',
                element: 'span',
                classes: ['marker']
            },
            {
                name: 'Spoiler',
                element: 'span',
                classes: ['spoiler']
            },
            {
                name: 'Code (dark)',
                element: 'pre',
                classes: ['fancy-code', 'fancy-code-dark']
            },
            {
                name: 'Code (bright)',
                element: 'pre',
                classes: ['fancy-code', 'fancy-code-bright']
            }
        ]
    } = options;
    // 如果传入的options没有对应项，使用默认值
    return {
        fontFamily: {
            options: fontFamilyOptions
        },
        fontSize: {
            options: fontSizeOptions
        },
        style: {
            definitions: styleDefinitions
        }
    };
}

// TODO  实现自动保存saveData方法，将编辑内容发送至后端
// DFZ
export function saveData(data) {
    // return new Promise( resolve => {
    //     setTimeout( () => {
    //         console.log( 'Saved', data );

    //         resolve();
    //     }, HTTP_SERVER_LAG );
    // } );
    console.log('saving...');
    console.log(data);
}


// 将当前页面的样式转为内联
export function getStyle() {
    let str = '<head><meta charset="utf-8"></meta>';
    const styles = document.querySelectorAll('style');
    for (let i = 0; i < styles.length; i++) {
        str += styles[i].outerHTML;
    }
    str += "<style>.results{width:100%!important;} .result .title{width:100%;}</style>";
    str += "<style>table{border-collapse: collapse;table-layout: fixed}</style>"
    // str += "<style>table thead tr{ background-color: #f3f4f9;}</style>"
    str += "<style>table td,th{ font-size: 14px;padding: 1px 1px;border-width: 1px;border-style: solid;border-color: #d0d0d0;word-break: keep-all;white-space: nowrap;}</style>"
    return str;
}

// 获取用户编辑的内容 <html>
export function getPageContent() {
    return window.editor.getData();
    // const pageContent =document.querySelector("#app > div > div > div.editor-container.editor-container_document-editor.editor-container_include-style > div.editor-container__editor-wrapper > div > div");
    // const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div");
    // return pageContent.outerHTML;
}

// TODO 获取并应用用户定义的样式css
export function getAndApplyUserStyles() {
    // 模拟从后端获取用户定义的样式
    const response = fetch('/api/user-styles');
    const styles = response.json();
    const styleElement = document.createElement('style');
    styleElement.innerHTML = styles;
    document.head.appendChild(styleElement);
    return styles;
}

// markdown转html 便于将大语言模型的输出（一般为markdown格式）转换为ckeditor的html格式
// 利用ckeditor markdown插件的功能子类，但不能在CkeditorView.vue中直接使用markdown插件
// 否则会改变编辑器数据处理器为markdown，即getData()需要传入markdown string，setData()返回markdown string
export function markdown2html(markdownString) {
    const markdownToHtml = new MarkdownToHtml();
    const htmlString = markdownToHtml.parse(markdownString);
    return htmlString;
}

// html转markdown 便于将文件内容发送给大语言模型来进行排版
// 再利用 @markdown2html 将大语言模型的返回内容重新转换为文件内容并展示 或做进一步处理
export function html2markdown(htmlString) {
    const htmltomarkdown = new HtmlToMarkdown();
    const markdownString = htmltomarkdown.parse(htmlString);
    return markdownString
}

// 请求用户AI生成的样式配置
export function getUserAILayoutConfig() {
    // TODO 请求用户AI生成的样式配置
    const options = {};
    // 对应的样式定义在`generatedStyle.css`中
    const {
        // title
        titleStyleOption = 'title1',
        // 标题样式配置 如 一、二 （1）、（2） 1. 2. I. II. A. B. （一）、（二）
        // 每级标题按顺序应用 [标题大小，标题样式] 大小也可自定义
        headingStyleOption = [['h3', 'heading1'], ['h4', 'heading2'], ['h5', 'heading3']], // limit 3
        // 列表样式配置
        listStyleOption = 'square',
        // 下面的各项样式每一个对应的均会应用
        // 正文样式配置 小四宋体
        bodyStyleOption = ['normal-text'],
        // 块引用样式配置
        blockquoteStyleOption = ['side-quote'],
        // 代码块样式配置
        codeBlockStyleOption = ['fancy-code', 'fancy-code-bright'],
    } = options;
    // 如果传入的options没有对应项，使用默认值
    return {
        titleStyle: {
            option: titleStyleOption
        },
        headingStyle: {
            option: headingStyleOption
        },
        bodyStyle: {
            option: bodyStyleOption
        },
        blockquoteStyle: {
            option: blockquoteStyleOption
        },
        codeBlockStyle: {
            option: codeBlockStyleOption
        },
        listStyle: {
            option: listStyleOption
        }
    };
}