import React, { useState, useEffect } from "react";
import { Alert, Button, Row, Col, Space, Input, Tooltip, } from "antd";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { SlateNode } from "@wangeditor/editor";
import { generateNewId } from "oak-domain/lib/utils/uuid";
import classNames from "classnames";
import Prompt from "../../../components/common/prompt";
import Style from "./web.module.less";
import { CloseOutlined, EyeOutlined, MenuOutlined, CaretDownOutlined } from "@ant-design/icons";
// 工具栏配置
const toolbarConfig = {
    excludeKeys: ["fullScreen"],
}; // TS 语法
// 自定义校验图片
function customCheckImageFn(src, alt, url) {
    // TS 语法
    if (!src) {
        return;
    }
    if (src.indexOf("http") !== 0) {
        return "图片网址必须以 http/https 开头";
    }
    return true;
    // 返回值有三种选择：
    // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}
function TocView(props) {
    const { toc, showToc, tocPosition, setShowToc, highlightBgColor, scrollId } = props;
    useEffect(() => {
        document.documentElement.style.setProperty('--highlight-bg-color', highlightBgColor);
    }, [highlightBgColor]);
    const generateTocList = (items, currentLevel = 1, parentId = null) => {
        //递归生成嵌套列表
        const result = [];
        let lastId = parentId;
        while (items.length > 0) {
            const item = items[0];
            //有无子级标题，有则显示展开图标
            const hasChildren = items.length > 1 && items[1].level > item.level;
            if (item.level > currentLevel) {
                // 递归生成子列表
                const sublist = generateTocList(items, item.level, item.id);
                result.push(<li key={item.id} id={`ul-${lastId}`}>
                        <ul style={{ listStyleType: 'none', paddingInlineStart: '6px' }}>
                            {sublist}
                        </ul>
                    </li>);
            }
            else if (item.level < currentLevel) {
                // 结束当前层级
                break;
            }
            else {
                // 添加当前层级的 <li>
                result.push(<li className={Style.listItem} key={item.id} id={`li-${item.id}`} style={{ paddingLeft: `${(item.level - 1) * 6}px`, }}>
                        <CaretDownOutlined id={`icon-${item.id}`} className={Style.icon} style={{ visibility: hasChildren && item.level < 5 ? 'visible' : 'hidden', color: '#A5A5A5' }} onClick={() => {
                        const iconElem = document.getElementById(`icon-${item.id}`);
                        const ulElem = document.getElementById(`ul-${item.id}`);
                        const isFolded = iconElem?.className.includes('iconFold') || ulElem?.className.includes('fold');
                        if (isFolded) {
                            iconElem?.classList.remove(Style.iconFold);
                            ulElem?.classList.remove(Style.fold);
                        }
                        else {
                            iconElem?.classList.add(Style.iconFold);
                            ulElem?.classList.add(Style.fold);
                        }
                    }}/>
                        <div style={{ fontSize: '1em', fontWeight: item.level === 1 ? 'bold' : 'normal' }} className={Style.tocItem} onClick={(event) => {
                        // editor.scrollToElem(item.id);
                        //编辑器滚动到对应元素
                        const elem = document.getElementById(item.id);
                        const elemTop = elem?.getBoundingClientRect().top;
                        const scrollContainer = document.getElementById(scrollId || 'article-upsert-editorContainer');
                        const containerTop = scrollContainer?.getBoundingClientRect().top;
                        scrollContainer?.scrollBy({
                            top: elemTop - containerTop,
                            behavior: 'smooth',
                        });
                        //添加背景色
                        elem?.classList.add(Style.highlight);
                        //移除背景色类名
                        setTimeout(function () {
                            elem?.classList.remove(Style.highlight);
                        }, 1000);
                        event.preventDefault();
                        event.stopPropagation();
                    }}>
                            {item.text}
                        </div>
                    </li>);
                items.shift(); // 移除已处理的项
                lastId = item.id;
            }
        }
        return result;
    };
    return (<div className={classNames(Style.tocContainer, {
        // [Style.fixed]: fixed
        })}>
            {showToc ? (<>
                    <div className={Style.catalogTitle}>
                        <div style={{ color: '#A5A5A5' }}>大纲</div>
                        <CloseOutlined style={{ color: '#A5A5A5' }} onClick={() => setShowToc(false)}/>
                    </div>

                    {(toc && toc.length > 0) ? (<ul style={{ listStyleType: 'none', paddingInlineStart: '0px' }}>{generateTocList([...toc])}</ul>) : (<div style={{ display: 'flex', alignItems: 'center', color: '#B1B1B1', height: '200px' }}>
                            <div>
                                对文档内容应用“标题”样式，即可生成大纲
                            </div>
                        </div>)}
                </>) : (<div className={classNames(Style.tocButton, { [Style.tocButtonRight]: tocPosition === 'right' })}>
                <Tooltip title="显示大纲" placement={tocPosition === 'right' ? 'left' : 'right'}>
                    <Button size="small" icon={<MenuOutlined />} onClick={() => setShowToc(true)}/>
                </Tooltip>
                </div>)}
        </div>);
}
export default function Render(props) {
    const { methods, data } = props;
    const { t, setEditor, check, uploadFile, update, setHtml, gotoPreview, clearContentTip, } = methods;
    const { id, content, editor, origin = 'qiniu', oakFullpath, html, tocPosition = 'none', highlightBgColor = 'none', scrollId } = data;
    const [articleId, setArticleId] = useState('');
    const [toc, setToc] = useState([]);
    const [showToc, setShowToc] = useState(false);
    useEffect(() => {
        if (id) {
            setArticleId(id);
        }
    }, [id]);
    useEffect(() => {
        if (tocPosition !== 'none') {
            setShowToc(true);
        }
    }, [tocPosition]);
    return (<div className={Style.container}>
            <Prompt when={!id || data.oakDirty} message={'您确认离开页面吗？'}/>
            <div style={{ width: 'calc(100% - 16px)', }}>
                <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default"/>
            </div>
            <Row gutter={[16, 0]}>
                {tocPosition === 'left' ? (<Col flex="228px">
                        <TocView toc={toc} showToc={showToc} tocPosition='left' setShowToc={setShowToc} highlightBgColor={highlightBgColor} scrollId={scrollId}/>
                    </Col>) : null}

                <Col flex="auto">
                    <div className={Style.content}>
                        <div id="article-upsert-editorContainer" className={classNames(Style.editorContainer, {
            [Style.editorExternalContainer]: !!scrollId
        })}>
                            {data.contentTip && (<Alert type="info" message={t('tips.content')} closable onClose={() => clearContentTip()}/>)}
                            <div className={Style.titleContainer}>
                                <Input onChange={(e) => update({ name: e.target.value })} value={data.name} placeholder={'请输入文章标题'} size="large" maxLength={32} suffix={`${[...(data.name || '')].length}/32`} className={Style.titleInput}/>
                            </div>
                            <div className={Style.editorContent}>
                                <Editor defaultConfig={{
            autoFocus: true,
            placeholder: '请输入文章内容...',
            MENU_CONF: {
                checkImage: customCheckImageFn,
                uploadImage: {
                    // 自定义上传
                    async customUpload(file, insertFn) {
                        // TS 语法
                        // file 即选中的文件
                        const { name, size, type } = file;
                        const extension = name.substring(name.lastIndexOf('.') + 1);
                        const filename = name.substring(0, name.lastIndexOf('.'));
                        const extraFile = {
                            entity: 'article',
                            entityId: articleId,
                            origin: origin,
                            type: 'image',
                            tag1: 'source',
                            objectId: generateNewId(),
                            filename,
                            size,
                            extension,
                            bucket: '',
                            id: generateNewId(),
                            fileType: type
                        };
                        try {
                            // 自己实现上传，并得到图片 url alt href
                            const url = await uploadFile(extraFile, file);
                            // 最后插入图片
                            insertFn(url, extraFile.filename);
                        }
                        catch (err) { }
                    },
                },
                uploadVideo: {
                    // 自定义上传
                    async customUpload(file, insertFn) {
                        // TS 语法
                        // file 即选中的文件
                        const { name, size, type } = file;
                        const extension = name.substring(name.lastIndexOf('.') + 1);
                        const filename = name.substring(0, name.lastIndexOf('.'));
                        const extraFile = {
                            entity: 'article',
                            entityId: articleId,
                            origin: origin,
                            type: 'video',
                            tag1: 'source',
                            objectId: generateNewId(),
                            filename,
                            size,
                            extension,
                            bucket: '',
                            id: generateNewId(),
                            fileType: type
                        };
                        try {
                            // 自己实现上传，并得到图片 url alt href
                            const url = await uploadFile(extraFile, file);
                            // 最后插入图片
                            insertFn(url, url + '?vframe/jpg/offset/0');
                        }
                        catch (err) { }
                    },
                },
            },
        }} onCreated={setEditor} onChange={(editor) => {
            setHtml(editor.getHtml());
            const headers = editor.getElemsByTypePrefix('header');
            const tocItems = headers.map((header) => {
                const text = SlateNode.string(header);
                const { id, type } = header;
                return {
                    text,
                    level: parseInt(type.substring(6)),
                    id,
                };
            });
            setToc([...tocItems]);
        }} style={{
            minHeight: 440,
        }} mode="default"/>
                            </div>
                          
                        </div>
                        <div className={Style.footer}>
                                <Row align="middle">
                                    <Col flex="none">
                                        <Space>
                                            <Button disabled={!data.oakDirty ||
            data.oakExecuting} type="primary" onClick={() => {
            check();
        }}>
                                                保存
                                            </Button>
                                            <Button onClick={() => {
            gotoPreview(content, data.name);
        }}>
                                                <EyeOutlined />
                                                预览
                                            </Button>
                                        </Space>
                                    </Col>
                                </Row>
                            </div>
                    </div>
                </Col>
                {tocPosition === 'right' ? (<Col flex="228px">
                        <TocView toc={toc} showToc={showToc} tocPosition='right' setShowToc={setShowToc} highlightBgColor={highlightBgColor} scrollId={scrollId}/>
                    </Col>) : null}
            </Row>
        </div>);
}