/*
 * @Description: 学员测评页面
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-11-23 11:33:41
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-09 19:57:21
//  */
import './index.scss';
import React, { useState, useEffect, useMemo } from 'react';
import { Tabs, Divider } from 'antd';
import { connect } from 'react-redux';
import Comment from './comment';
import CommitRecord from './commitRecord';
import TaskDescription from './taskDescription';
import TextNumber from './../../components/textNumber';
import actions from '../../../../redux/actions';
// const { TabPane } = Tabs;

const LeftPane = (props) => {

  const { hack, userCodeTab, changeUserCodeTab } = props;
  const { pass_count, submit_count } = hack;
  const [defaultActiveKey, setDefaultActiveKey] = useState('task');
  
  console.log(pass_count, submit_count);
  const tabArrs = [
    { title: '任务描述', key: 'task', content: (<TaskDescription />) },
    { title: '提交记录',  key: 'record', content: (<CommitRecord />) },
    // { title: '评论',  key: 'comment', content: (<Comment />) },
  ];

  const navItem = [
    {
      title: '任务描述',
      key: 'task'
    }, 
    {
      title: '提交记录',
      key: 'record'
    }
  ];

  const Comp = {
    task: (<TaskDescription />),
    record: (<CommitRecord />)
  };

  useEffect(() => {
    setDefaultActiveKey(userCodeTab);
  }, [userCodeTab])

  // const tabs = tabArrs.map((tab) => {
  //   const Comp = tab.content;
  //   return (
  //     <TabPane tab={tab.title} key={tab.key}>
  //       { Comp }
  //     </TabPane>      
  //   )
  // });

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

  const renderComp = useMemo(() => {
    return Comp[defaultActiveKey];
  }, [defaultActiveKey]);

  const renderNavItem = navItem.map((item) => {
    const _classes = item.key === defaultActiveKey ? 'add_editor_item active' : 'add_editor_item';
    return (
      <li
        key={item.key}
        className={_classes}
        onClick={() => setDefaultActiveKey(item.key)}
      >
        <span className={'item-span'}>{item.title}</span>
      </li>
    )
  });

  // 点击消息
  const handleClickMessage = () => {
    console.log('点击的消息图标---------');
  }

   // 点击点赞
  const handleClickLike = () => {
    console.log('点击的Like---------');
  }

   // 点击不喜欢
  const handleClickDisLike = () => {
    console.log('点击的DisLike---------');
  }

  return (
    <React.Fragment>
      {/* <Tabs className={'user_code_tab_area'} activeKey={defaultActiveKey} onChange={handleTabChange}>
        { tabs }
      </Tabs>
      <div className={'number_area'}>
        <div className="number_flex flex_count">
          <TextNumber text="通过次数" number={pass_count} position="vertical"/>
          <Divider type="vertical" style={{ height: '20px', margin: '10px 20px' }}/>
          <TextNumber text="提交次数" number={submit_count} position="vertical"/>
        </div>
        <div className="number_flex flex_info">
          <TextNumber text="message" number={4235} type="icon" onIconClick={handleClickMessage}/>
          <TextNumber text="like" number={4235} type="icon" onIconClick={handleClickLike}/>
          <TextNumber text="dislike" type="icon" onIconClick={handleClickDisLike}/>
        </div>
      </div> */}
      <ul className={'add_editor_list_area'}>
        { renderNavItem }
      </ul>
      <div className="comp_ctx">
        { renderComp }
      </div>
      <div className={'number_area'}>
        <div className="number_flex flex_count">
          <TextNumber text="通过次数" number={pass_count} position="vertical"/>
          <Divider type="vertical" style={{ height: '20px', margin: '10px 20px' }}/>
          <TextNumber text="提交次数" number={submit_count} position="vertical"/>
        </div>
        {/* <div className="number_flex flex_info">
          <TextNumber text="message" number={4235} type="icon" onIconClick={handleClickMessage}/>
          <TextNumber text="like" number={4235} type="icon" onIconClick={handleClickLike}/>
          <TextNumber text="dislike" type="icon" onIconClick={handleClickDisLike}/>
        </div> */}
      </div>
    </React.Fragment>
  );
}

const mapStateToProps = (state) => {
  const { hack, userCodeTab} = state.ojForUserReducer;
  return {
    hack,
    userCodeTab
  }
}
// changeUserCodeTab
const mapDispatchToProps = (dispatch) => ({
  changeUserCodeTab: (key) => dispatch(actions.changeUserCodeTab(key))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LeftPane);