import React, { Component } from 'react'
import { Drawer } from 'antd'
import MonacoEditor from '../../../../components/monaco-editor'

import TPICodeSetting from '../TPICodeSetting'
import { fromStore, toStore } from 'educoder'
/**
    props :
        mirror_name  决定语言
        isEditablePath
        repositoryCode
        codemirrorDidMount
        shixun.forbid_copy
        showSettingDrawer, settingDrawerOpen
*/
class TPIMonaco extends Component {

    constructor(props) {
        super(props)
        this.state = {
            cmFontSize: fromStore('cmFontSize', 16),
            cmCodeMode: fromStore('cmCodeMode', 'vs-dark'),
            autoCompleteSwitch: fromStore('autoCompleteSwitch', true),
        }
        this.onSetEditor = this.onSetEditor.bind(this)
    }
    onFontSizeChange = (value) => {
        toStore('cmFontSize', value)
        this.setState({ cmFontSize: value });
    }

    onCodeModeChange = (value) => {
        toStore('cmCodeMode', value)
        this.setState({ cmCodeMode: value })
    }

    onSetEditor(instance, monaco) {
        const { codemirrorDidMount, shixun, doFileUpdateRequestOnCodeMirrorBlur, onEditBlur } = this.props
        if (codemirrorDidMount) { codemirrorDidMount(instance) }
        if (shixun && shixun.forbid_copy) {
            instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C, () => null)
            instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V, () => null)

            instance.onDidPaste(a => { window.__pastePosition = a })
            window.addEventListener('paste', () => {
                const selection = instance.getSelection();
                const range = new monaco.Range(
                    window.__pastePosition.startLineNumber || selection.endLineNumber,
                    window.__pastePosition.startColumn || selection.endColumn,
                    window.__pastePosition.endLineNumber || selection.endLineNumber,
                    window.__pastePosition.endColumn || selection.endColumn);
                instance.executeEdits('', [{ range, text: '' }])
            })
        }
        if (doFileUpdateRequestOnCodeMirrorBlur) {
            instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
                doFileUpdateRequestOnCodeMirrorBlur()
                return false
            })
        }
        if (onEditBlur) {
            instance.onDidBlurEditorWidget(() => {
                onEditBlur()
            })
        }

    }


    render() {
        const { repositoryCode, showSettingDrawer, shixun, isEditablePath, settingDrawerOpen, mirror_name, onRepositoryCodeUpdate } = this.props;
        const { cmFontSize, cmCodeMode } = this.state
        const editorOptions = {
            value: repositoryCode,
            language: mirror_name,
            options: {
                readOnly: !isEditablePath && shixun && shixun.code_edit_permission != true,
                scrollBeyondLastLine: false,
            },
            theme: cmCodeMode,
            insertSpaces: false,
            fontSize: cmFontSize,
            onChange: (value) => { if (onRepositoryCodeUpdate) { onRepositoryCodeUpdate(value) } },
            editorDidMount: this.onSetEditor
        }

        return (
            <React.Fragment>
                <Drawer
                    className="settingDrawer"
                    width={260}
                    placement="right"
                    closable={false}
                    onClose={() => showSettingDrawer(false)}
                    visible={settingDrawerOpen}
                >
                    <TPICodeSetting {...this.props} {...this.state}
                        onFontSizeChange={this.onFontSizeChange}
                        onCodeModeChange={this.onCodeModeChange}
                        onAutoCompleteSwitchChange={this.onAutoCompleteSwitchChange}
                    ></TPICodeSetting>
                </Drawer>
                <MonacoEditor {...editorOptions} />
            </React.Fragment>
        );
    }
}


export default (TPIMonaco);

