import React, { useEffect, useState } from 'react';
import './Index.scss';
import  'echarts/lib/component/tooltip';
import  'echarts/lib/component/title';
import  'echarts/lib/component/legend'
import  'echarts/lib/component/markPoint';

import { Select , Pagination } from 'antd';

import { FlexAJ } from '../../Component/layout';
import Line from '../Echart/Line';
import Calendar from '../Echart/Calendar';
import ConcentrateProject from './ConcentrateProject';
import Activity from './Activity';
import moment from 'moment';
import Axios from 'axios';
import Nodata from '../../Nodata';

const { Option } = Select;
const aLimit = 5;
function Index(props) {
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ projectTrends , setProjectTrends ] = useState(undefined);

  const [ year , setYear ] = useState(moment().get('year'));
  const [ yearList , setYearList ] = useState(undefined);
  const [ activityDate , setActivityDate ] = useState(undefined);

  const [ statisticData , setStatisticData ] = useState(undefined);

  const username = props.match.params.username;
  const current_user = props.current_user;
  const user = props.user;

  useEffect(()=>{
    if(user){
      let c = user.created_time && user.created_time.split("-")[0];
      let y = moment().get('year');
      let array = []
      for(var i = y ; i >= parseInt(c,0);i--){
        array.push(i);
      }
      setYearList(array);
    }
  },[user])

  // 在贡献度日历表中选择一个时间
  function chooseTime(data) {
    if(data){
      setPage(1);
      setActivityDate(data[0]);
    }
  }

  // 年份下拉框option
  function renderYear(list){
    return list.map((i,k)=>{
      return(
        <Option key={i}>{i}</Option>
      )
    })
  }

  useEffect(()=>{
    getActivity();
  },[activityDate,page])

  // 获取动态列表
  function getActivity() {
    const url = `/users/${username}/project_trends.json`;
    Axios.get(url,{
      params:{
        date:activityDate,
        limit:aLimit,page
      }
    }).then(result=>{
      if(result && result.data){
        setProjectTrends(result.data.project_trends);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  // 获取近期活动统计
  useEffect(()=>{
    getStatistics();
  },[])

  function getStatistics() {
    const url = `/users/${username}/statistics/activity.json`;
    Axios.get(url).then(result=>{
      if(result && result.data){
        setStatisticData(result.data);
      }
    }).catch(error=>{})
  }

  return(
    <div>
      <div>
        <ConcentrateProject 
          {...props}
          userLogin={username} 
          current={current_user && (current_user.login === username)}
        />
      </div>
      <div className="recentStatic">
        <p className="font-18 mb15">近期活动统计</p>
        <div className="echartBox"><Line data={statisticData}/></div>
      </div>
      <div className="calendarStatic">
        <FlexAJ style={{marginBottom:"15px"}}>
          <span className="font-18">贡献度</span>
          <Select style={{width:"200px"}} placeholder="选择年份" value={year} onSelect={(e)=>{setYear(e);setActivityDate(undefined)}}>
            { yearList && renderYear(yearList) }
          </Select>
        </FlexAJ>
        <div className="echartBox">
          <Calendar time={year} userLogin={username} chooseTime={chooseTime}/>
        </div>
      </div>
      <div className="activeStatic">
        <span className="font-18">动态</span>
        { projectTrends && projectTrends.length > 0 && <Activity list = {projectTrends}/> }
        { projectTrends && projectTrends.length === 0 && <Nodata _html="暂无动态" />}
        { total > aLimit && <div style={{textAlign:'center',paddingBottom:"30px"}}><Pagination pageSize={aLimit} current={page} total={total} onChange={(p)=>setPage(p)}/></div> }
      </div>
    </div>
  )
}
export default Index;