import React, { Component } from 'react'
import {Tabs,Table,message,Divider,Tooltip,Tag} from 'antd';
import  request from '../../../utils/request'
import './index.css'
import qs from 'qs'
const { TabPane } = Tabs;
export default class SearchDetails extends Component {
  state={
    id:qs.parse(this.props.location.search.slice(1)).dataid,
    // id:515,
    AntibodyData:{
      structures:[]
    },
    AntigenData:[],
    StructuresData:[],
    ClinicalIndicationData:{},
    defaultActiveKey:qs.parse(this.props.location.search.slice(1)).defaultActiveKey

  }
  componentDidMount(){
    console.log(this.state);
    this.getOne(this.state.defaultActiveKey)
    
  }
  getAntibodyList(){
    const{id}=this.state
    console.log(id);
    this.setState({loading:true})
    request.get('/therapeutic/antibody/'+id)
    .then(res => {
      console.log(res)
      if (res.data.code===0) {
        console.log(res.data.data);
        this.setState({AntibodyData:res.data.data})
       
       
        this.setState({loading:false}
          )
       
      }else{
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      console.error(err); 
    })

  }
  getAntigenList(){
    const{id}=this.state
    this.setState({loading:true})
    request.get('/therapeutic/antigen/'+id)
    .then(res => {
      console.log(res)
      if (res.data.code===0) {
        console.log(res.data.data);
        this.setState({AntigenData:res.data.data})
       
       
        this.setState({loading:false}
          )
       
      }else{
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      console.error(err); 
    })

  }
  getPdb=(e)=>{
    let data={
      PdbId:e
    }
    this.props.history.push({ pathname: '/home/MolstarView', search: qs.stringify(data)})

  }
  getStructuresList(){
    const{id}=this.state
    this.setState({loading:true})
    request.get('/therapeutic/structure/'+id)
    .then(res => {
      console.log(res)
      if (res.data.code===0) {
        console.log(res.data.data);
        this.setState({StructuresData:res.data.data})
       
       
        this.setState({loading:false}
          )
       
      }else{
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      console.error(err); 
    })

  }
  getClinicalIndicationList(){
    const{id}=this.state
    this.setState({loading:true})
    request.get('/therapeutic/clinical-indication/'+id)
    .then(res => {
      console.log(res)
      if (res.data.code===0) {
        console.log(res.data.data);
        this.setState({ClinicalIndicationData:res.data.data})
       
       
        this.setState({loading:false}
          )
       
      }else{
        message.error(res.data.msg);
      }
    })
    .catch(err => {
      console.error(err); 
    })

  }
  getOne(e){
    if (e==='Antibody') {
      this.getAntibodyList()
      return
    }
    if (e==='Antigen') {
      this.getAntigenList()
     
      return
    }
    if (e==='Structures') {
      this.getStructuresList()
      return
    }
    if (e==='ClinicalIndication') {
      this.getClinicalIndicationList()
      return
      
    }

  }
  callback=(e)=>{
    if (e==='Antibody') {
      this.getAntibodyList()
      return
    }
    if (e==='Antigen') {
      this.getAntigenList()
     
      return
    }
    if (e==='Structures') {
      this.getStructuresList()
      return
    }
    if (e==='ClinicalIndication') {
      this.getClinicalIndicationList()
      return
      
    }

  }
  getSequenceDetails=(e)=>{
    let data={
      Sequence:e
    }
    this.props.history.push({ pathname: '/home/SequenceDetails', search: qs.stringify(data)})

  }
  render() {
    const {AntibodyData,AntigenData,StructuresData,ClinicalIndicationData}=this.state
    const columns = [
      {
        title: 'Type',
        dataIndex: 'epitopeType',
        key: 'epitopeType',
        // render: text => <a>{text}</a>, 
        width:200
      },
      {
        title: 'Description',
        dataIndex: 'epitopeDescription',
        key: 'epitopeDescription',
       
        render: (text, record) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
            {text}
          </div>
        ),
      },
      {
        title: 'Starting Position',
        dataIndex: 'startingPosition',
        key: 'startingPosition',
        width:200   
      },
      {
        title: 'Ending Position',
        key: 'endingPosition',
        dataIndex: 'endingPosition',
        width:200
        
        
        // render: tags => (
        //   <span>
        //     {tags.map(tag => {
        //       let color = tag.length > 5 ? 'geekblue' : 'green';
        //       if (tag === 'loser') {
        //         color = 'volcano';
        //       }
        //       return (
        //         <Tag color={color} key={tag}>
        //           {tag.toUpperCase()}
        //         </Tag>
        //       );
        //     })}
        //   </span>
        // ),
      },
    ];
    const AntibodyView= <div className='div-list'>
      <div className='list-one'>
        <div className='left-div itle-div'>
        antibody name:
        </div>
        <div className='right-div'>
        {AntibodyData.antibodyName}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        target:
        </div>
        <div className='right-div'>
        {AntibodyData.target}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Antiody Type:
        </div>
        <div className='right-div'>
        {AntibodyData.antibodyType}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Status:
        </div>
        <div className='right-div'>
        {AntibodyData.estStatus}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Year_proposed:
        </div>
        <div className='right-div'>
        {AntibodyData.yearProposed}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Clinical indication:
        </div>
        <div className='right-div'>
        {AntibodyData.clinicalIndication}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Biosimilars:
        </div>
        <div className='right-div'>
        {AntibodyData.biosimilars}
        </div>
      </div>
      {/* <div className='list-one'>
        <div className='left-div itle-div'>
        Sequence:
        </div>
        <div className='right-div'>
        {AntibodyData.biosimilars}
        </div>
      </div> */}
      <div className='list-one'>
        <div className='left-div itle-div'>
        Structures:
        </div>
        <div className='right-div'>
        {AntibodyData.structures&&AntibodyData.structures.map((item,index)=>{
         
          return(
            <Tag key={index} onClick={()=>this.getPdb(item)} color="#108ee9">{item}</Tag>
          )
        })

        }

        
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        caculation:
        </div>
        <div className='right-div'>
        
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Seq_pI:
        </div>
        <div className='right-div'>
        {AntibodyData.seqPi}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Seq_Instability:
        </div>
        <div className='right-div'>
        {AntibodyData.seqInstability}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Seq_aromaticity:
        </div>
        <div className='right-div'>
        {AntibodyData.seqAromaticity}
        </div>
      </div>
      <div className='list-one'>
        <div className='left-div itle-div'>
        Ext_coefficient:
        </div>
        <div className='right-div'>
        {AntibodyData.seqExtCoefficient}
        </div>
      </div>
      

    </div>
      const AntigenView=AntigenData.map((item,index)=>{
        return(
          <div className='div-list' key={index} >
          <div className='list-one'>
            <div className='left-div itle-div'>
            Antigen name:
            </div>
            <div className='right-div'>
            {item.antigenName}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Uniport ID:
            </div>
            <div className='right-div'>
            {item.uniprotId}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Source:
            </div>
            <div className='right-div'>
            {item.source}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Antigen Sequence:
            </div>
            <div className='right-div link-div'>
            {/* {item.sequence} */}
           
            <Tooltip title={item.sequence}>
                <span> Sequence</span>
              </Tooltip>
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Structures:
            </div>
            <div className='right-div'>
            {''}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            PDB:
            </div>
            <div className='right-div'>
             {
             
             item.pdb&&( <Tag onClick={()=>this.getPdb(item.pdb)} color="#108ee9">{item.pdb}</Tag>)}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            Epitopes :
            </div>
            <div className='right-div'>
            {/* <Table columns={columns} dataSource={data} /> */}
            </div>
          </div>
          <div className='list-one'>
            <div className='left-div itle-div'>
            {/* Epitopes : */}
            </div>
            <div className='right-div'>
              <div className='table-div'>
              <Table  bordered  columns={columns} pagination={false} scroll={{ x: 1500, y: 300 }}  dataSource={item.epitopes} />
              </div>
           
            </div>
          </div>
          <Divider />
        </div>
        )
   

      }) 
      const StructuresView= StructuresData.map((item,index)=>{
        return(
          <div  className='div-list' key={index}>
          <div className='list-one'>
             <div className='left-div' >
             PDB id :
             </div>
             <div className='right-div link-div' onClick={()=>this.getPdb(item.pdbId)}>
               {item.pdbId}
             </div>
         </div>
         <div className='list-one'>
             <div className='left-div itle-div'>
             Title :
             </div>
             <div className='right-div'>
               {item.title}
             </div>
         </div>
         <div className='list-one'>
             <div className='left-div itle-div'>
             References :
             </div>
             <div className='right-div'>
               {item.references}
             </div>
         </div>
        
         {
           item.chains.map((item,index)=>{
              return(

              <div key={index}>
                <div className='list-one'>
                  <div className='left-div itle-div'>
                  Chain ID :
                  </div>
                  <div className='right-div'>
                  {item.chainId}
                  </div>
              </div>
              <div className='list-one'>
             <div className='left-div itle-div'>
             Chain type :
             </div>
             <div className='right-div'>
               {item.chainType}
             </div>
                </div>
                <div className='list-one'>
                    <div className='left-div itle-div'>
                    Chain Sequence  :
                    </div>
                    <div className='right-div'>
                    <Tooltip title={item.chainSequence}>
                      <span className='link-div'> Sequence</span>
                    </Tooltip>
                    </div>
                </div>
                  <div className='list-one'>
                      <div className='left-div itle-div'>
                      CDR region  :
                      </div>
                      <div className='right-div'>
                        {
                          (item.cdrRegion!=null)&& Object.entries(item.cdrRegion).map((item,index)=>{
                              console.log(item);
                              return(
                                <div key={index}>{item[0]}:{ item[1][0]} ({item[1][1]}-{item[1][2]})</div>
                               
                              )
                          })
                        
                        }
                        
                      </div>
                  </div>
                  <Divider />
                </div>

              )
           })
         }
     
         
       
           </div>
        )
      })
     const ClinicalIndicationView=Object.entries(ClinicalIndicationData).map((item,index)=>{
       console.log(item);
      return(
        
       <div  key={index}>
          <div className='title-div' key={index}> {item[0]}</div>
         
         {item[1].map((item2,index2)=>{
          
            return( <div  className='div-list' key={index2}>
            <div className='list-one'>
               <div className='left-div itle-div'>
               Clinical indication :
               </div>
               <div className='right-div'>
                 {item2.clinicalIndication}
               </div>
           </div>
           <div className='list-one'>
               <div className='left-div itle-div'>  
                Clinical domain:
               </div>
               <div className='right-div'>
                 {item2.clinicalDomain}
               </div>
           </div>
           <div className='list-one'>
               <div className='left-div itle-div'>
               Application:
               </div>
               <div className='right-div'>
                 {item2.application}
               </div>
           </div>
           <div className='list-one'>
               <div className='left-div itle-div'>
               Expression system :
               </div>
               <div className='right-div'>
               {item2.expressionSystem}
               </div>
           </div>
           {/* <div className='list-one'>
               <div className='left-div itle-div'>
               Company:
               </div>
               <div className='right-div'>
               {item2.company}
               </div>
           </div> */}
           <div className='list-one'>
               <div className='left-div itle-div'>
               Development status :
               </div>
               <div className='right-div'>
               {item2.developmentStatus}
               </div>
           </div>
           <div className='list-one'>
               <div className='left-div itle-div'>
               Status and year :
               </div>
               <div className='right-div'>
               {item2.regulatoryAgencyStatusYear}
               </div>
           </div>
           
           <Divider />
             </div>)
         })}
        
       </div>
         
      )
 
     })
    return (
      <div className='search-details-div'>
         <Tabs  type="card" onChange={this.callback} defaultActiveKey={this.state.defaultActiveKey}>
            <TabPane tab="Antibody" key="Antibody">
              {AntibodyView}
            </TabPane>
            <TabPane tab="Antigen" key="Antigen">
              {AntigenView}
            </TabPane>
            <TabPane tab="Structures" key="Structures">
              {StructuresView}
            </TabPane>
            <TabPane tab="ClinicalIndication" key="ClinicalIndication">
              {ClinicalIndicationView}
            </TabPane>
        </Tabs>
      </div>
    )
  }
}
