import React, {Component} from 'react';

import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal} from 'antd';

import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

// import "antd/dist/antd.css";

import axios from 'axios';

import {getUrl} from 'educoder';

let origin = getUrl();

let path = getUrl("/editormd/lib/")

const $ = window.$;

let timeout;

let currentValue;

const Option = Select.Option;

const RadioGroup = Radio.Group;

function create_editorMD(id, width, high, placeholder, imageUrl, callback) {
    var editorName = window.editormd(id, {
        width: width,
        height: high,
        path: path,   // "/editormd/lib/"

        syncScrolling: "single",
        tex: true,
        tocm: true,
        emoji: true,
        taskList: true,
        codeFold: true,
        searchReplace: true,
        htmlDecode: "style,script,iframe",
        sequenceDiagram: true,
        autoFocus: false,
        toolbarIcons: function () {
            // Or return editormd.toolbarModes[name]; // full, simple, mini
            // Using "||" set icons align right.
            return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear"]
        },
        toolbarCustomIcons: {
            testIcon: "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
            testIcon1: "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>"
        },
        //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
        saveHTMLToTextarea: true,
        // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
        dialogMaskOpacity: 0.6,
        placeholder: placeholder,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
        imageUploadURL: imageUrl,//url
        onload: function () {
            // this.previewing();
            $("#" + id + " [type=\"latex\"]").bind("click", function () {
                editorName.cm.replaceSelection("```latex");
                editorName.cm.replaceSelection("\n");
                editorName.cm.replaceSelection("\n");
                editorName.cm.replaceSelection("```");
                var __Cursor = editorName.cm.getDoc().getCursor();
                editorName.cm.setCursor(__Cursor.line - 1, 0);
            });

            $("#" + id + " [type=\"inline\"]").bind("click", function () {
                editorName.cm.replaceSelection("$$$$");
                var __Cursor = editorName.cm.getDoc().getCursor();
                editorName.cm.setCursor(__Cursor.line, __Cursor.ch - 2);
                editorName.cm.focus();
            });
            $("[type=\"inline\"]").attr("title", "行内公式");
            $("[type=\"latex\"]").attr("title", "多行公式");

            window.md_elocalStorage(editorName, `UpdatepropaedeMDs_${id}`, "UpdatepropaedeMDs");

            callback && callback()
        }
    });
    return editorName;
}


export default class TPMUpdatepropaede extends Component {
    constructor(props) {
        super(props)
        this.state = {
            shixunId:undefined
        }
    }

    updatepropaedeMD(initValue, id) {

        this.contentChanged = false;
        const placeholder = "";
        // amp;
        // 编辑时要传memoId
        const imageUrl = `/api/attachments.json`;
        // 创建editorMd

        const Updatepropaede_editormd = create_editorMD(id, '100%', 400, placeholder, imageUrl, () => {
            setTimeout(() => {
                Updatepropaede_editormd.resize()
                Updatepropaede_editormd.cm && Updatepropaede_editormd.cm.refresh()
            }, 500)

            if (initValue != undefined) {
                Updatepropaede_editormd.setValue(initValue)
            }
            Updatepropaede_editormd.cm.on("change", (_cm, changeObj) => {
                console.log('....contentChanged')
                this.contentChanged = true;
            })
        });
        this.Updatepropaede_editormd = Updatepropaede_editormd;
        window.Updatepropaede_editormd = Updatepropaede_editormd;
    }

    componentDidMount() {
        let id = this.props.match.params.shixunId;
        let url="/shixuns/"+id+"/propaedeutics.json";
        axios.get(url).then((response) => {
            console.log(response)
            if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

            }else{
                this.setState({
                    shixunId:id
                })

                if(response.data.content[0]!=null){
                    this.updatepropaedeMD(response.data.content, "UpdatepropaedeMD");
                }else{
                    this.updatepropaedeMD("", "UpdatepropaedeMD");
                }
            }
        }).catch((error) => {
            console.log(error)
        });

    }

    updatepropaedeuticsvalue=()=>{
        let id = this.props.match.params.shixunId;
        let url="/shixuns/"+id+"/update_propaedeutics.json";
        const update_propaedeuticsvalue = this.Updatepropaede_editormd.getValue();
        axios.post(url,{
                content:update_propaedeuticsvalue
            }
            ).then((response) => {
            if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {

            }else{
                this.props.showSnackbar(response.data.message);
            }
        }).catch((error) => {
            console.log(error)
        });
    }
    render() {

        let {shixunId} = this.state;


        return (
            <React.Fragment>
                <div className="educontent">

                     <div className="edu-back-white mt30">
                         <div className="font-16 pt30 pl20 pr20 pb40 bor-bottom-greyE clearfix">
                             <span className="fl">背景知识</span>
                             <a href={"/shixuns/"+shixunId+"/propaedeutics"}className="color-grey-9 fr">返回</a>
                         </div>

                         <div className="padding40-20">
                             <div className="padding10-20 edu-back-greyf5 radius4" id="UpdatepropaedeMD">
                                 <textarea style={{display: 'none'}} id="Updatepropaedes" name="content"> </textarea>
                                 <div className="CodeMirror cm-s-defualt">
                                 </div>
                             </div>
                         </div>
                     </div>

                    <div className="clearfix mb30 mt30">
                        <a className="defalutSubmitbtn fl mr20"
                           onClick={this.updatepropaedeuticsvalue}>保存</a>
                        <a href={"/shixuns/"+shixunId+"/propaedeutics"} className="defalutCancelbtn fl"
                        >取消</a>
                    </div>

                </div>
            </React.Fragment>
        )
    }
}


