import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import { Card,Button,Pagination,Tabs,Spin,message ,Collapse } from 'antd';
import request from '../../../utils/request'
import qs from 'qs'
import './index.css'
const { TabPane } = Tabs;
const { Panel } = Collapse;

export default class SearchList extends Component {
  state = {
    smilesList:[
    ],
    visible:false,
    pdbId:'6f6s',
    total_num:0,
    smilesData:qs.parse(this.props.location.search.slice(1)),
    loading:true,
    TargetState:true,
    ShowDivDataid:null

};
    getPdid(e){
      let data={
        dataid:e
        
      }

      this.props.history.push({ pathname: '/Kinase/TargetDetails', search: qs.stringify(data)})

    }
    onShowSizeChange=(current, pageSize)=> {
      if (this.state.smilesData.name==='Drug') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getList()
        return
      }
      if (this.state.smilesData.name==='Target') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getTargetList()
        return
      }
      if (this.state.smilesData.name==='Ligand') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getLigandList()
        return
      }
      if (this.state.smilesData.name==='Mutation') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getMutationList()
        return
      }
    }
    onChange=(current, pageSize)=>{
      if (this.state.smilesData.name==='Drug') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        
        this.getList()
        return
      }
      if (this.state.smilesData.name==='Target') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getTargetList()
        return
      }
      if (this.state.smilesData.name==='Ligand') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getLigandList()
        return
      }
      if (this.state.smilesData.name==='Mutation') {
        let smilesData = this.state.smilesData;
        smilesData.page=current
        smilesData.page_size=pageSize
        this.setState({
          smilesData
        })
        this.getMutationList()
        return
      }

    }
    componentDidMount(){
        console.log(this.state.smilesData);
      if (this.state.smilesData.name==='Drug') {
        this.getList()
      }
      if (this.state.smilesData.name==='Target') {
        this.getTargetList()
      }
      if (this.state.smilesData.name==='Ligand') {
        
        this.getLigandList()
      }
      if (this.state.smilesData.name==='Mutation') {
        
        this.getMutationList()
      }
      
    }
    getList(){
      console.log(qs.parse(this.props.location.search.slice(1)));
      this.setState({loading:true})
      request.post('/kinase_drug_search', qs.stringify(this.state.smilesData) )
      .then(res => {
        console.log(res)
        if (res.data.code===200) {
          console.log(res.data.data);
          let newSmilesList=res.data.data
          
          newSmilesList.forEach(element => {
            element.TargetState=true
          });
          this.setState({smilesList:newSmilesList})

          this.setState({total_num:res.data.total_num})
          this.setState({loading:false}
            )
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
  
    getTargetList(){
      console.log(qs.parse(this.props.location.search.slice(1)));
      this.setState({loading:true})
      request.post('/kinase_targets_search', qs.stringify(this.state.smilesData) )
      .then(res => {
        console.log(res)
        if (res.data.code===200) {
          console.log(res.data.data);
          this.setState({smilesList:res.data.data})
          this.setState({total_num:res.data.total_num})
          this.setState({loading:false}
            )
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
   
    getLigandList(){
      console.log(qs.parse(this.props.location.search.slice(1)));
      this.setState({loading:true})
      request.post('/kinase_ligand_search', qs.stringify(this.state.smilesData) )
      .then(res => {
        console.log(res)
        if (res.data.code===200) {
          console.log(res.data.data);
        
          this.setState({total_num:res.data.total_num})
          this.setState({loading:false})
          let newSmilesList=res.data.data
          
          newSmilesList.forEach(element => {
            element.TargetState=true
          });
          this.setState({smilesList:newSmilesList})
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
       
    getMutationList(){
      console.log(qs.parse(this.props.location.search.slice(1)));
      this.setState({loading:true})
      request.post('/mutation_search', qs.stringify(this.state.smilesData) )
      .then(res => {
        console.log(res)
        if (res.data.code===200) {
          console.log(res.data.data);
          this.setState({smilesList:res.data.data})
          this.setState({total_num:res.data.total_num})
          this.setState({loading:false}
            )
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }

    onChangeGroup=(e)=>{
            console.log(e);
    }
    getOne(e){
      console.log(e);
      const {dataid,datatype}=e
      let data={
        dataid,
        datatype
      }

      if (this.state.smilesData.name==='Drug') {
        this.props.history.push({ pathname: '/Kinase/SearchDetails', search: qs.stringify(data)})
      }
      if (this.state.smilesData.name==='Target') {
        this.props.history.push({ pathname: '/Kinase/TargetDetails', search: qs.stringify(data)})
      }
      if (this.state.smilesData.name==='Ligand') {
        this.props.history.push({ pathname: '/Kinase/LigandDetails', search: qs.stringify(data)})
      }
      if (this.state.smilesData.name==='Mutation') {
        this.props.history.push({ pathname: '/home/MutationDetails', search: qs.stringify(data)})
      }
      
    }
    TargetButton=(e,index)=>{
      console.log(e.TargetState);
      let newsmilesList=this.state.smilesList
      
      newsmilesList.forEach(element => {
        if (element.dataid===e.dataid) {
          element.TargetState=false
        }
      });
        this.setState({
          smilesList:newsmilesList
      })

      
    }
    TargetButton2=(e,index)=>{
      console.log(e.TargetState);
      let newsmilesList=this.state.smilesList
      
      newsmilesList.forEach(element => {
        if (element.dataid===e.dataid) {
          element.TargetState=true
        }
      });
        this.setState({
          smilesList:newsmilesList
      })

      
    }
    
  render() {
    const {smilesList,loading,ShowDivDataid,total_num,smilesData,TargetState}=this.state

    const listItems = smilesList.map( (item,index)=> {
      return(
        <Card  loading={loading} hoverable extra={<a onClick={()=>this.getOne(item)}>{item.name}</a>} style={{ width: '100%',  marginBottom: '20px' }} key={index} >
        <div className='list-div-one'>
            <div className={(smilesData.name==='Drug'||smilesData.name==='Ligand')?'list-div-left':'isShowDiv'}>
            <Jsme height="150px" width="" options="depict,useopenchemlib" smiles={item.smile} />
            </div>
            <div className='list-div-right' >
              {
              Object.keys(item.info).map((item2,key2,arr)=>{
                if ( typeof item.info[item2]==='object') {
                  return( <div className='left'key={key2} > <span>{item2}</span>:
                  { 
                item2==='Indication'&&item.info[item2].slice(0,5).map((item3,index3)=>{
                  return( 
                     <span   type="primary" style={{fontWeight: 300,
                      color: 'black'} }  key={index3} onClick={()=>this.getPdid(item3)}>{item3}</span>)
               })}
               {
                   item2==='Target'&&item.info[item2].slice(0,5).map((item3,index3)=>{
                    return( 
                       <Button className={(item.TargetState)?'':'isShowDiv'}  type="primary" style={{marginBottom:'5px', marginLeft:'5px'} }  key={index3} onClick={()=>this.getPdid(item3.dataid)}>{item3.name}</Button>)
                 })
                 
               }
              
              <Button  className={(item.info[item2].length>5&&item.TargetState)?'':'isShowDiv'}  style={{marginBottom:'5px', marginLeft:'5px'} } onClick={()=>this.TargetButton(item,index)} >查看更多Target</Button>
               { 
                  item2==='Target'&&item.info[item2].map((item3,index3)=>{
                    return( 
                       <Button type="primary" className={!item.TargetState?'':'isShowDiv'}  style={{marginBottom:'5px', marginLeft:'5px'} }  key={index3} onClick={()=>this.getPdid(item3.dataid)}>{item3.name}</Button>)
                 })
              
                  
               }
               <Button  className={!item.TargetState?'':'isShowDiv'}  style={{marginBottom:'5px', marginLeft:'5px'} } onClick={()=>this.TargetButton2(item,index)} >收起</Button>
               
               <div>
                
               
                </div>
                
                
               </div>



                )

                }else{
                  return( <div className='left'key={key2} > <span>{item2}</span>:
             
                {
                  item.info[item2]
                 }
              
               </div>



                )
                  

                }
               
                      })
              }
              
                    {/* <p><font>DRUG_NAME：</font>{item.DRUG_NAME}</p>
                    <p><font>SMILES：</font>{item.smile}</p>
                    <p><font>Drug_Type：</font>{item.Drug_Type}</p>
                    <p><font>DrugBankID：</font>{item.DrugBankID}</p>
                    <p><font>ChemblID：</font>{item.ChemblID}</p> */}
            </div>
            <div className='btn-list'>
                {item.right_info&&Object.entries(item.right_info).map((item2,index2)=>{
                  if (typeof item2[1]==='string' ) {
                    return( 
                      // <div>
                      //  <span>{item2[0]}:</span> 
                      //   {item2[1]}
                      // </div>
                      <div className='right-div'key={index2} > <span>{item2[0]}</span>:
             
                      {
                        item2[1]
                       }
                    
                     </div>
                    )
                  }
                    
                })}
          
            </div>
    
            <div>
            </div>
    
        </div>
        </Card>
      )
    }
   

  )
    return (
      <div className='search-div' >
          <Spin tip="Loading..." size='large' spinning={this.state.loading}>
          <Tabs  type="card">
          <TabPane tab={smilesData.name} key={smilesData.name}>
              <div className='search-content' >
              Search Content:{smilesData.drugs_data}
              </div>
              <div className='search-content' >
              Search Total:{total_num}条
              </div>
          {/* <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeGroup}>
            <div className='CheckboxList'>
            <Checkbox value="pdb">pdb</Checkbox>
            <Checkbox value="Drug">Drug</Checkbox>
            <Button type="primary">Search</Button>
            </div>
          </Checkbox.Group> */}
          {listItems}
            <Pagination
            showSizeChanger
            onShowSizeChange={this.onShowSizeChange}
            onChange={this.onChange}
            total={total_num}
          />
          </TabPane>
        </Tabs>
 
          </Spin>
      
    
      </div>
    )
  }
}
