import React, { useState, useEffect } from 'react';
import { Editor } from '@wangeditor/editor-for-react';
import { SlateNode } from '@wangeditor/editor';
import { Col, Row } from 'antd';
import classNames from 'classnames';
import { TocView } from '../toc/tocView';
import Styles from './web.module.less';
export default function Render(props) {
    const { className, content, tocPosition = 'none', tocFixed, highlightBgColor = 'none', headerTop = 0, tocClosed = false, scrollId } = props.data;
    const editorConfig = {
        readOnly: true,
        autoFocus: true,
        // scroll: false,
    };
    const [editor, setEditor] = useState(null);
    const [html, setHtml] = useState('');
    const [toc, setToc] = useState([]);
    const [showToc, setShowToc] = useState(false);
    useEffect(() => {
        return () => {
            if (editor == null)
                return;
            editor.destroy();
            setEditor(null);
        };
    }, [editor]);
    useEffect(() => {
        if (content) {
            setHtml(content);
        }
    }, [content]);
    useEffect(() => {
        if (tocPosition !== 'none') {
            setShowToc(true);
        }
    }, [tocPosition]);
    return (<div className={classNames(Styles.container, className)}>
            <Row gutter={[16, 0]}>
                {tocPosition === 'left' && (<Col flex="228px">
                        <TocView toc={toc} showToc={showToc} tocPosition='left' setShowToc={setShowToc} highlightBgColor={highlightBgColor} headerTop={headerTop} fixed={tocFixed} closed={tocClosed} scrollId={scrollId}/>
                    </Col>)}

                <Col flex="auto">
                    <div className={Styles.content}>
                        <div className={Styles.editorContainer}>
                            <div style={{ width: "100%" }}>
                                <Editor defaultConfig={editorConfig} value={html} mode="default" style={{
            width: '100%'
        }} 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]);
        }}/>
                            </div>
                        </div>
                    </div>
                </Col>
                {tocPosition === 'right' && (<Col flex="228px">
                        <TocView toc={toc} showToc={showToc} tocPosition='right' setShowToc={setShowToc} highlightBgColor={highlightBgColor} headerTop={headerTop} fixed={tocFixed} closed={tocClosed} scrollId={scrollId}/>
                    </Col>)}
            </Row>
        </div>);
}