/*
 * @Description: 学员学习
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-11-23 10:53:19
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-06 17:02:32
 */
import './index.scss';
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import SplitPane from 'react-split-pane';
import LeftPane from './leftpane';
import RightPane from './rightpane';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder'
// import RightPane from '../newOrEditTask/rightpane';
import { Button } from 'antd';
import actions from '../../../redux/actions';

const StudentStudy = (props) => {

  const {
    mygetHelmetapi = {}
  } = props;
  useEffect(() => {
    const {
      match: { params }, 
      getUserProgramDetail,
      saveUserProgramIdentifier,
    } = props;

    let { id } = params;
    // console.log(id);
    // 保存当前的id
    saveUserProgramIdentifier(id);
    // startProgramQuestion(id);
    getUserProgramDetail(id);
  }, []);
  return (
    <div className={'student_study_warp'}>
      <div className={'student_study_header'}>
        <div className={'avator_nicker'}>
          <img alt="用户头像" className={'student_img'} src={getImageUrl((mygetHelmetapi && mygetHelmetapi.nav_logo_url) || 'images/educoder/headNavLogo.png?1526520218')} />
          <span className={'student_nicker'}>
            {(mygetHelmetapi &&mygetHelmetapi.name) || ''}
          </span>
        </div>
        <div className={'study_name'}>
          <span>乘积最大序列</span>
        </div>
        <div className={'study_quit'}>
          <Button>
            <Link to="/problems">退出</Link>
          </Button>
        </div>
      </div>
      <div className="split-pane-area">
        <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="50%">
          <div className={'split-pane-left'}>
            <LeftPane />
          </div>
          <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
            <RightPane />
            <div />
          </SplitPane>
        </SplitPane>
      </div>
    </div>
  )
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = (dispatch) => ({
  // 调用开启编辑
  // startProgramQuestion: (id) => dispatch(actions.startProgramQuestion(id))
  // 调用编程题详情
  getUserProgramDetail: (id) => dispatch(actions.getUserProgramDetail(id)),
  saveUserProgramIdentifier: (id) => dispatch(actions.saveUserProgramIdentifier(id))
});

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