import React, { Component } from "react";
import { connect } from 'react-redux';
import * as State from '../../common/StateConstant';
import { updateNote } from '../actions';
import { isNull, isStringNull } from '../../common/Util';

// 引入编辑器组件
import BraftEditor from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css';

class Panel extends Component {

    state = {
        editorState: BraftEditor.createEditorState(null)
      }

    // constructor() {
    //     super();
    //     this.state = {
    //         // 创建一个空的editorState作为初始值
    //         // editorState: BraftEditor.createEditorState('<p></p>'),
    //         // outputHTML: '<p></p>'
    //     }
    // }

    componentDidMount() {
        this.isChanged = false;
        const { note } = this.props;
        // 3秒后更改编辑器内容
        // this.setEditorContent(note.content);
    }

    componentWillUnmount() {
        this.isChanged = false
    }

    componentDidUpdate(prevProps, prevState) {
        
      }

    handleChange = (editorState) => {
        console.log("change")
        // console.log(editorState.toHTML())
        console.log(this.state)
        // this.setState({
            // editorState: editorState,
            // outputHTML: editorState.toHTML()
        // })
    }

    hello=()=>{
        console.log("hello word")
    }

    // setEditorContent = (content) => {
    //     this.setState({
    //         editorState: BraftEditor.createEditorState(content)
    //     })
    // }

    saveEditorContent = () => {
        const {outputHTML}=this.state;
        const{
            onSaveNote,
            note:{id}
        } =this.props;
        onSaveNote(id,outputHTML)
    }

    render() {
        const { editorState } = this.state;
        const {note} =this.props;

        // const editorValue=BraftEditor.createEditorState(note.content);

        console.log(this.props)
        const extendControls = [
            {
                key: 'custom-button',
                type: 'button',
                text: '保存',
                onClick: this.saveEditorContent
            }
        ]

        return (
            <div style={{ padding: '24px 0', background: '#fff', minHeight: 480, flex: '0 1 auto' }}>
                <div className="editor-wrapper">
                    <BraftEditor
                        value={editorState}
                        extendControls={extendControls}
                        onChange={this.handleChange}
                    />
                </div>
            </div>
        )
    }
}


const setVisiableNote = (todos, filter) => {
    if (isStringNull(filter.currentNoteId)) {
        return null;
    }
    let notes = todos.filter(item => item.id === filter.currentNoteId);
    if (notes.length === 1) {
        return notes[0];
    }
    return null;
}

const mapStateToProps = (state, ownProps) => {
    return {
        note: setVisiableNote(state[State.NOTES], state[State.CURRENT]),
        current: state[State.CURRENT]
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSaveNote: (id, content) => {
            dispatch(updateNote(id, content))
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Panel);