/*
 * @Description: 
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-11-27 14:59:51
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-19 15:06:49
 */
import React, { useState, useEffect } from 'react';
import {connect} from 'react-redux';
import MyMonacoEditor from '../../components/myMonacoEditor';
import ControlSetting from '../../components/controlSetting';
import actions from '../../../../redux/actions';

const RightPane = (props) => {
  
  const {
    identifier, 
    submitInput, 
    submitUserCode,
    input,
    hack,
    notice,
    updateCode,
    hadCodeUpdate,
    editor_code,
    updateNotice,
    saveUserInputCode,
    restoreInitialCode,
    saveUserCodeForInterval
  } = props;

  const [editorCode, setEditorCode] = useState('');

  useEffect(() => {
    if (editor_code) {
      setEditorCode(editor_code);
    } else {
      setEditorCode(hack.code);
    }
  }, [hack, editor_code]);
  
  const handleSubmitForm = () => {
    // 提交时， 先调用提交接口，提交成功后，循环调用测评接口
    submitUserCode(identifier, submitInput, 'submit');
    // // 提交时，先调用评测接口， 评测通过后才调用保存接口
    // updateCode(identifier, submitInput, 'submit');
  }

  let timer = null; // 定时器
  // 代码块内容变化时
  const handleCodeChange = (code) => {
    // 保存用户提交的代码块
    // console.log(code);
    setEditorCode(code);
    if (!timer) {
      timer = setInterval(() => {
        clearInterval(timer);
        timer = null;
        saveUserCodeForInterval && saveUserCodeForInterval(identifier, code);
      }, 3000);
    }
     // 保存用户代码块
    saveUserInputCode(code);
  }
  // 代码调试
  const handleDebuggerCode = (value) => {
    // 调用保存代码块接口，成功后，调用调试接口
    updateCode(identifier, value, 'debug');
  }
  // 恢复初始代码
  const handleRestoreInitialCode = () => {
    restoreInitialCode(identifier, '恢复初始代码成功');
  }

  // 更新代码
  const handleUpdateNotice = () => {
    updateNotice && updateNotice();
  };

  return (
    <div className={'right_pane_code_wrap'}>
      <MyMonacoEditor
        notice={notice}
        identifier={identifier}
        language={hack.language} 
        code={editorCode}
        hadCodeUpdate={hadCodeUpdate}
        onCodeChange={handleCodeChange}
        onUpdateNotice={handleUpdateNotice}
        onRestoreInitialCode={handleRestoreInitialCode}
      />
      <ControlSetting 
        identifier={identifier}
        inputValue={input}
        onDebuggerCode={handleDebuggerCode}
        onSubmitForm={handleSubmitForm}/>
    </div>
  );
}

const mapStateToProps = (state) => {

  const {
    user_program_identifier, 
    hack, 
    userTestInput, 
    editor_code, 
    notice,
    hadCodeUpdate
  } = state.ojForUserReducer;
  // const { language, code } = hack;
  return {
    hack,
    notice,
    hadCodeUpdate,
    editor_code,
    input: userTestInput,
    submitInput: hack.input, 
    identifier: user_program_identifier
  };
}

const mapDispatchToProps = (dispatch) => ({
  // type: 提交类型  debug | submit
  submitUserCode: (identifier, inputValue, type) => dispatch(actions.submitUserCode(identifier, inputValue, type)),
  // 更新代码块内容
  updateCode: (identifier, inputValue, type) => dispatch(actions.updateCode(identifier, inputValue, type)),
  // 保存用户代码块至Reducer中
  saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
  // 保存用户代码至后台
  saveUserCodeForInterval: (identifier, code) => dispatch(actions.saveUserCodeForInterval(identifier, code)),
  // 恢复初始代码
  restoreInitialCode: (identifier, msg) => dispatch(actions.restoreInitialCode(identifier, msg)),
});

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