export interface RichCommandGroup {
    groupName: string;
    values: Array<string | RichEditorCommand>;
    selected?: boolean;
}

export type SelectedCommand = Array<string | RichCommandGroup>;

/** 编辑器自定义工具栏类型 */
export type RichTextEditorToolbars = SelectedCommand;


export interface RichEditorCommand {
    code: string;
    cls: string;
    title: string;
    value: any;
    selected?: boolean;
    visible?: boolean;
}
['bold', 'italic', 'code-block', { header: 1 }, { header: 2 }, { list: 'ordered' }, { list: 'bullet' }, 'image']
export const RICH_COMMANDS = {
    concise: [
        // { visible: true, code: 'formatselect', cls: 'mr-1 f-icon f-icon-convert-lowercase', title: '段落&标题', value: [{ header: [1, 2, 3, 4, 5, 6, false] }] },
        // { visible: true, code: 'fontselect', cls: 'mr-1 f-icon f-icon-font-family', title: '字体', value: [{ font: ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'FangSong', 'Arial', 'Times', 'sans-serif'] }] },
        // { visible: true, code: 'fontsizeselect', cls: 'mr-1 f-icon f-icon-font-size', title: '字号', value: [{ size: ['small', false, 'large', 'huge'] }] },
        { visible: true, code: 'bold', cls: 'mr-1 rich-toolbar-icons rich-bold', title: '加粗', value: ['bold'] },
        { visible: true, code: 'italic', cls: 'mr-1 rich-toolbar-icons rich-italic', title: '倾斜', value: ['italic'] },
        { visible: true, code: 'underline', cls: 'mr-1 rich-toolbar-icons rich-underline', title: '下划线', value: ['underline'] },
        { visible: true, code: 'strike', cls: 'mr-1 rich-toolbar-icons rich-strike', title: '删除线', value: ['strike'] },
        { visible: true, code: 'numlist', cls: 'mr-1 rich-toolbar-icons rich-ordered', title: '有序列表', value: [{ list: 'ordered' }] },
        { visible: true, code: 'bullist', cls: 'mr-1 rich-toolbar-icons rich-bullet', title: '无序列表', value: [{ list: 'bullet' }] },
        // { visible: true, code: 'outdent', cls: 'mr-1 rich-toolbar-icons rich-indent-1', title: '取消缩进', value: [{ indent: '-1' }] },
        // { visible: true, code: 'indent', cls: 'mr-1 rich-toolbar-icons rich-indent1', title: '缩进', value: [{ indent: '+1' }] },
        // { visible: true, code: 'forecolor', cls: 'mr-1 rich-toolbar-icons rich-color', title: '文本颜色', value: [{ color: [] }] },
        // { visible: true, code: 'backcolor', cls: 'mr-1 rich-toolbar-icons rich-background', title: '背景色', value: [{ background: [] }] },
        // { visible: true, code: 'link', cls: 'mr-1 rich-toolbar-icons rich-link', title: '插入链接', value: ['link'] },
        // { visible: true, code: 'removeformat', cls: 'mr-1 rich-toolbar-icons rich-clear', title: '清除格式', value: ['clean'] },
        // { visible: true, code: 'blockquote', cls: 'mr-1 rich-toolbar-icons rich-blockquote', title: '引用', value: ['blockquote'] },
        { visible: true, code: 'code-block', cls: 'mr-1 rich-toolbar-icons rich-code-block', title: '代码块', value: ['code-block'] },
        { visible: true, code: 'header1', cls: 'mr-1 rich-toolbar-icons rich-header1', title: '标题 1', value: [{ header: 1 }] },
        { visible: true, code: 'header2', cls: 'mr-1 rich-toolbar-icons rich-header2', title: '标题 2', value: [{ header: 2 }] },
        { visible: true, code: 'image', cls: 'mr-1 rich-toolbar-icons rich-image', title: '插入图片', value: ['image'] },
        // { visible: true, code: 'sub', cls: 'mr-1 rich-toolbar-icons rich-sub', title: '下标', value: [{ script: 'sub' }] },
        // { visible: true, code: 'super', cls: 'mr-1 rich-toolbar-icons rich-super', title: '上标', value: [{ script: 'super' }] },
        // { visible: true, code: 'video', cls: 'mr-1 rich-toolbar-icons rich-video', title: '插入视频', value: ['video'] },
        // { visible: true, code: 'align', cls: 'mr-1 rich-toolbar-icons rich-align', title: '对齐方式', value: [{align: []}] }
    ],
    advanced: [
        {
            visible: true, code: 'undo',
            cls: 'mr-1 f-icon f-icon-undo',
            title: '撤消',
            value: 'undo'
        },
        {
            visible: true, code: 'redo',
            cls: 'mr-1 f-icon f-icon-redo',
            title: '重复',
            value: 'redo'
        },
        {
            visible: true, code: 'formatselect',
            cls: 'mr-1 f-icon f-icon-convert-lowercase',
            title: '段落&标题',
            value: 'formatselect'
        },
        {
            visible: true, code: 'fontselect',
            cls: 'mr-1 f-icon f-icon-font-family',
            title: '字体',
            value: 'fontselect'
        },
        {
            visible: true, code: 'fontsizeselect',
            cls: 'mr-1 f-icon f-icon-font-size',
            title: '字号',
            value: 'fontsizeselect'
        },
        {
            visible: true, code: 'bold',
            cls: 'mr-1 rich-toolbar-icons rich-bold',
            title: '加粗',
            value: 'bold'
        },
        {
            visible: true, code: 'italic',
            cls: 'mr-1 rich-toolbar-icons rich-italic',
            title: '倾斜',
            value: 'italic'
        },
        {
            visible: true, code: 'underline',
            cls: 'mr-1 rich-toolbar-icons rich-underline',
            title: '下划线',
            value: 'underline'
        },
        {
            visible: true, code: 'strike',
            cls: 'mr-1 rich-toolbar-icons rich-strike',
            title: '删除线',
            value: 'strikethrough'
        },
        {
            visible: true, code: 'numlist',
            cls: 'mr-1 rich-toolbar-icons rich-ordered',
            title: '有序列表',
            value: 'numlist'
        },
        {
            visible: true, code: 'bullist',
            cls: 'mr-1 rich-toolbar-icons rich-bullet',
            title: '无序列表',
            value: 'bullist'
        },
        {
            visible: true, code: 'outdent',
            cls: 'mr-1 rich-toolbar-icons rich-indent-1',
            title: '取消缩进',
            value: 'outdent'
        },
        {
            visible: true, code: 'indent',
            cls: 'mr-1 rich-toolbar-icons rich-indent1',
            title: '缩进',
            value: 'indent'
        },
        {
            visible: true, code: 'forecolor',
            cls: 'mr-1 rich-toolbar-icons rich-color',
            title: '文本颜色',
            value: 'forecolor'
        },
        {
            visible: true, code: 'backcolor',
            cls: 'mr-1 rich-toolbar-icons rich-background',
            title: '背景色',
            value: 'backcolor'
        },
        {
            visible: true, code: 'image',
            cls: 'mr-1 rich-toolbar-icons rich-image',
            title: '插入图片',
            value: 'image'
        },
        {
            visible: true, code: 'link',
            cls: 'mr-1 rich-toolbar-icons rich-link',
            title: '插入链接',
            value: 'link'
        },
        {
            visible: true, code: 'removeformat',
            cls: 'mr-1 rich-toolbar-icons rich-clear',
            title: '清除格式',
            value: 'removeformat'
        },
        {
            visible: true, code: 'alignleft',
            cls: 'mr-1 f-icon f-icon-align-left',
            title: '左对齐',
            value: 'alignleft'
        },
        {
            visible: true, code: 'aligncenter',
            cls: 'mr-1 f-icon f-icon-align-center',
            title: '居中对齐',
            value: 'aligncenter'
        },
        {
            visible: true, code: 'alignright',
            cls: 'mr-1 f-icon f-icon-align-right',
            title: '右对齐',
            value: 'alignright'
        },
        {
            visible: true, code: 'alignjustify',
            cls: 'mr-1 f-icon f-icon-align-justify',
            title: '两端对齐',
            value: 'alignjustify'
        },
        {
            visible: true, code: 'table',
            cls: 'mr-1 f-icon f-icon-table',
            title: '表格',
            value: 'table'
        }
    ]
};

/**
 * 将设计时的数据转换为运行时富文本编辑器工具栏所识别的格式
 * @param designerData 设计时数据
 */
export function Convert2HtmlEditorToolbars(type: 'advanced' | 'concise', toolbars: RichTextEditorToolbars) {
    if (!toolbars || !toolbars.length) {
        return null;
    }

    const typ: string = type.toLowerCase();
    const tools: any = toolbars;

    const allCMDs = RICH_COMMANDS[typ];
    const toolbarItems = tools.map(n => {
        if (typeof n === 'object') {
            n.values = n.values.map((s: string) => {
                return allCMDs.find(c => c.code === s);
            }).filter(t => t);

            return n;
        } else {
            return allCMDs.find(c => c.code === n);
        }
    }).filter(t => t);

    const configs = toolbarItems.map(n => {
        if (n.groupName) {
            if (typ === 'concise') {
                return n.values.map(v => v.value).flat();
            }
            return n.values.map(v => v.value);
        }
        return n.value;
    }).filter(n => n.length);

    if (typ === 'concise') {
        return configs;
    } else if (typ === 'advanced') {
        return configs.map((n, i) => {
            if (Array.isArray(n)) {
                if (i === 0) {
                    n.push('|');
                }
                if (i > 0) {
                    n.unshift('|');
                }
            }
            return n;
        }).flat().join(' ');
    }
}