import React, { Component } from 'react'

import TPICodeSetting from '../tpi-code-setting'
import { fromStore, toStore } from 'educoder'
import { Drawer } from 'antd'
import MonacoEditor from '../../../../components/monaco-editor'

/**
    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')
        }
    }

    onFontSizeChange = (value) => {
        toStore('cmFontSize', value)
        this.setState({ cmFontSize: value });
    }

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

    render() {
        const { repositoryCode, isEditablePath, showSettingDrawer, settingDrawerOpen, onEditorFocus, shixun, onRepositoryCodeUpdate, codemirrorDidMount, mirror_name } = this.props;
        const { cmFontSize, cmCodeMode } = this.state;
        const options = {
            fontSize: cmFontSize,
            readOnly: !isEditablePath && shixun && shixun.code_edit_permission != true
        }
        return (
            <React.Fragment>
                <Drawer
                    placement="right"
                    className="setting-drawer"
                    width={247}
                    closable={false}
                    visible={settingDrawerOpen}
                    onClose={() => showSettingDrawer(false)}
                >
                    <TPICodeSetting {...this.props} {...this.state}
                        onFontSizeChange={this.onFontSizeChange}
                        onCodeModeChange={this.onCodeModeChange}
                        onAutoCompleteSwitchChange={this.onAutoCompleteSwitchChange}
                    ></TPICodeSetting>
                </Drawer>
                {shixun ?
                    <MonacoEditor value={repositoryCode} language={mirror_name} theme={cmCodeMode} options={options} onFocus={onEditorFocus} forbidCopy={shixun.forbid_copy} editorDidMount={codemirrorDidMount} /> : null
                }
            </React.Fragment>
        );
    }
}


export default (TPIMonaco);