import React, { useEffect, useState } from 'react';
import { Modal , Checkbox , Spin , Input } from 'antd';
import Axios from 'axios';
import { Link } from 'react-router-dom';

const { Search } = Input;
const limit = 20;
function ConcentrateBox({ visible , onCancel , onSure , username , choosed }) {
  const [ page , setPage ]= useState(1);
  const [ total , setTotal ]= useState(0);
  const [ pageSize , setPageSize ] = useState(false);
  const [ search , setSearch ] = useState(undefined);

  const [ list , setList ]= useState([]);
  const [ value , setValue ]= useState([]);
  const [ isSpin , setIsSpin ]= useState(true);
  const [ disable , setDisable ] = useState(false);
  const [ loadCount , setLoadCount ]= useState(0);
  
  useEffect(()=>{
    if(visible && loadCount === 0){
      setLoadCount(loadCount+1);
      setIsSpin(true);
      getProjectList();
    }
  },[visible])

  useEffect(()=>{
    if(page>1){
      setIsSpin(true);
      getProjectList(page,undefined);
    }
  },[page])

  useEffect(()=>{
    if(search !== undefined){
      setIsSpin(true);
      getProjectList(1,search);
    }
  },[search])

  useEffect(()=>{
    if(visible && choosed && choosed.length >0 ){
      setValue(choosed);
    }
  },[visible,choosed])

  useEffect(()=>{
    if(value && value.length === 6){
      setDisable(true);
    }else{
      setDisable(false);
    }
  },[value])

  function getProjectList(p,s) {
    const url =  `/users/${username}/projects.json`;
    Axios.get(url,{
      params:{
        page:p,limit,is_public: "public",search:s
      }
    }).then(result=>{
      if(result && result.data){
        let e = mergeArrayMerge(list,result.data.projects);
        setTotal(result.data.count);
        setList(page > 1 ? e : result.data.projects);
        setIsSpin(false);

        let s = parseInt(result.data.count/limit,0);
        let y = result.data.count%limit;
        setPageSize(y>0?s+1:s);
      }
    }).catch(error=>{})
  }

  function mergeArrayMerge (array1, array2) {
    array1.map((v, index) => {
      if (v !== '') {
          let idx = array2.indexOf(v);
          if (idx > -1) {
              array2.splice(idx, 1)
          }
      }
    });
    array1 = array1.concat(array2);
    return array1
  }

  function onOk() {
    onSure && onSure(value);
    setValue([]);
  }

  function chooseProject(e) {
    setValue(e);
  }

  // 搜索
  function onSearch(params) {
    setSearch(params);
  }

  return(
    <Modal 
      visible={visible}
      title={'选择精选项目'}
      closable={true}
      width={500}
      className="ConcentrateBox"
      onCancel={onCancel}
      onOk={onOk}
      okText="确定"
      cancelText="取消"
    >
      <Spin spinning={isSpin}>
        <div className="operateDiv">
          <p>最多可选取6个公开仓库</p>
          <Search 
            placeholder="请输入项目名称进行搜索" 
            onSearch={onSearch}
            enterButton="搜索"
            allowClear
          />
        </div>
        <div className="listbox">
          {
            list && list.length > 0 &&
            <Checkbox.Group value={value} onChange={chooseProject} style={{width:"100%"}}>
              {
                list.map((i,k)=>{
                  return(
                    <Checkbox value={i.id} disabled={disable && (value.filter(j=>j === i.id).length===0)}>{i.name}</Checkbox>
                  )
                })
              }
            </Checkbox.Group>
          } 
        </div>
        { total > limit && page < pageSize && <div className="morelist" onClick={()=>setPage(page+1)}>查看更多</div> }
        { list && list.length === 0 && <div style={{textAlign:"center"}}>您还没有公开的{search && `“${search}”`}项目，先去<Link to={`/projects/deposit/new`} className="color-blue">新建项目</Link></div> }
      </Spin>
    </Modal>
  )
}
export default ConcentrateBox;