/*
 * @Description: 右侧代码块控制台
 * @Author: tangjiang
 * @Github:
 * @Date: 2019-11-27 16:02:36
 * @LastEditors  : tangjiang
 * @LastEditTime : 2020-01-20 17:42:06
 */
import './index.scss';
import React, { useState, useRef, useEffect } from 'react';
import { Button, Icon, notification } from 'antd';
import { connect } from 'react-redux';
import InitTabCtx from '../initTabCtx';
import ExecResult from '../execResult';
import actions from '../../../../redux/actions';
import Tabs from '../../../../components/tabs';


const tabNavs = [{ value: '1', title: '自定义测试用例' }, { value: '2', title: '代码执行结果' }]

const ControlSetting = (props) => {

  const {
    inputValue,
    loading,
    submitLoading,
    identifier,
    excuteState,
    editor_code,
    commitTestRecordDetail,
    changeLoadingState,
    changeSubmitLoadingStatus,
    changeShowOrHideControl,
    onDebuggerCode,
    onSubmitForm
  } = props;
  const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
  const [showTextResult, setShowTextResult] = useState(false); // 是否点击控制台按钮
  const formRef = useRef(null);

  const cls = `control-tab`;

  // 切换tab
  const handleTabChange = (key) => {
    setDefaultActiveKey(key);
  }

  useEffect(() => {
    setShowTextResult(props.showOrHideControl);
  }, [props]);

  // 显示/隐藏tab
  const handleShowControl = () => {
    setShowTextResult(!showTextResult);
    changeShowOrHideControl(!showTextResult);
  }

  // 调试代码
  const handleTestCode = (e) => {
    if (!editor_code) {
      notification.warning({
        message: '提示',
        description: '代码块内容不能为空'
      });
      return;
    }
    // 调出控制台界面
    setShowTextResult(true);
    changeShowOrHideControl(true);
    if (formRef.current) {
      formRef.current.handleTestCodeFormSubmit(() => {
        setDefaultActiveKey('2');
      });
    }
  }

  // 提交
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!editor_code) {
      notification.warning({
        message: '提示',
        description: '代码块内容不能为空'
      });
      return;
    }
    changeSubmitLoadingStatus(true);
    onSubmitForm && onSubmitForm();
  }

  // 处理调度代码
  const handleDebuggerCode = (values) => {
    changeLoadingState(true);
    onDebuggerCode(values);
  }
  // icon-shangjiantou
  return (
    <div className={`pane_control_area ${showTextResult ? 'active' : ''}`} >
      <div className="pane_control_collapse" onClick={handleShowControl} style={{ top: showTextResult ? '-322px' : 0 }} >
        <Icon type={showTextResult ? "down" : "up"} />
      </div>

      <Tabs tabs={tabNavs} className={cls} onChange={handleTabChange} activeKey={defaultActiveKey} >
        <div className={defaultActiveKey == 1 ? 'show-panel' : 'hide-panel'}>
          <InitTabCtx
            inputValue={inputValue}
            wrappedComponentRef={(form) => formRef.current = form}
            onDebuggerCode={handleDebuggerCode}
          />
        </div>
        <div className={defaultActiveKey == 2 ? 'show-panel' : 'hide-panel'}>
          <ExecResult
            excuteState={excuteState}
            excuteDetail={commitTestRecordDetail}
          />
        </div>
      </Tabs>

      <div className="pane_control_opts">
        <Button
          type="link"
          style={{ color: '#fff' }}
        >
          控制台
          </Button>
        <p>
          <Button ghost
            loading={loading}
            style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}
            onClick={handleTestCode}
            disabled={!identifier}
          >调试代码</Button>
          <Button
            loading={submitLoading}
            type="primary"
            onClick={handleSubmit}
          >
            提交
        </Button>
        </p>
      </div>
    </div>
  );
}

const mapStateToProps = (state) => {
  const { commonReducer, ojForUserReducer } = state;
  const { loading, excuteState, submitLoading, showOrHideControl } = commonReducer;
  const { commitTestRecordDetail, hack, editor_code } = ojForUserReducer;
  return {
    hack,
    editor_code,
    loading,
    submitLoading,
    excuteState,
    showOrHideControl,
    // identifier: user_program_identifier,
    commitTestRecordDetail // 提交详情
  };
};
// changeSubmitLoadingStatus
const mapDispatchToProps = (dispatch) => ({
  changeShowOrHideControl: (flag) => dispatch(actions.changeShowOrHideControl(flag)),
  changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
  changeSubmitLoadingStatus: (flag) => dispatch(actions.changeSubmitLoadingStatus(flag)),
  debuggerCode: (identifier, values) => dispatch(actions.debuggerCode(identifier, values)),
  // inputValue 输入值
  updateCode: (identifier, inputValue, type) => dispatch(actions.updateCode(identifier, inputValue, type))
});

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