import React, { Component } from 'react'
import { Card,Tooltip,message,Button,Tabs,Spin,Table,Tag, Collapse,Divider,Modal,Form,Select,InputNumber,Popover} from 'antd';
import { request } from '../../../utils/request'
import Molstar from "molstar-react";
import { Jsme } from 'jsme-react'
import qs from 'qs'
import './index.css'
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;


export default class SearchDetails extends Component {
    state = {
      name:'',
        dataOne:qs.parse(this.props.location.search.slice(1)),
        visible:false,
        pdbId:'6f6s',
        DetailsData:{
          smile:''
         
        },
        panelList:{},
        loading:true,
        getStructureList:{
          ligand_up_list:[],
          ligand_list:[],
          chain:[],
          References:[]
        },
        listData:{
          pdb_code: '',
          ligand: '',
          resolution: 0
        },
        fileData:{
          filestring:'',
          type:'pdb'
        }
    };
    componentDidMount(){
      this.getDetails()
    }
    getDetails(){
      // this.setState({loading:true})
      this.setState({loading:true})
      request.post('/drugs_detail', this.props.location.search.slice(1) )
      .then(res => {
        this.setState({loading:false})
        if (res.data.code===200) {
          console.log(res.data.data['Drug Type']);

          let data=res.data.data
          this.setState({DetailsData:{
            DrugType:data['Drug Type'],
            Sysnonyms:data.Sysnonyms,
            smile:data.smile
          }})
          let DetailsData=this.state.DetailsData
          DetailsData.smile=data.smile
      this.setState({
        DetailsData:DetailsData
      })
          delete data.Sysnonyms
          delete data['Drug Type']
          this.setState({name:data.name})
          delete data.name
          delete data.smile
          console.log(data);

          this.setState({panelList:data})
          this.setState({loading:false})
          let StructureList=data.Structure
          if (StructureList.length>0) {
            this.getStructure(StructureList[0].pdb)
            
          }

         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
    getStructure=(e)=>{
      request.post('/search_pdb_data', qs.stringify({
        pdb:e
      }) )
      .then(res => {
        this.setState({loading:false})
        if (res.data.code===200) {
          this.setState({getStructureList:res.data.data})
          let listData=this.state.listData
          listData.pdb_code=res.data.data.name
          this.setState({listData})
  
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })

    }
    ChangeTabs=(e)=>{
      console.log(e);
      let listData=this.state.listData
      listData.ligand=''
      this.setState({
        listData:listData
      })
      this.getStructure(e)
    }
    getPdid(e){
      console.log(e);
      this.setState({visible: true})
      this.setState({pdbId: e})

    }
    getTag=(e)=>{
        console.log(e);
        this.setState({visible: true})
        this.setState({pdbId: e})
    }
    getReferences=(e)=>{
      window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
  }
      getList=()=>{
          if (this.state.listData.ligand==='') {
            message.warning('输入查询条件');
            return
          }
        request.post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData) )
        .then(res => {
          let fileData  =   JSON.parse(JSON.stringify(this.state.fileData) )
          fileData.filestring=res.data
          this.setState({
            fileData
          })
          this.setState({
          visible:true
        })
        console.log(this.state.fileData);
          this.setState({loading:false})
          // if (res.data.code===200) {
          //   this.setState({getStructureList:res.data.data})
            
          //   this.setState({
          //     visible:true
          //   })
            
          // }else{
          //   message.error(res.data.msg);
          // }
        })
        .catch(err => {
          console.error(err); 
        })

      }
      getResolutionData=(e)=>{
        let listData=this.state.listData
        listData.resolution=e
          this.setState({
            listData
          })
      }
      LigandChange=(e)=>{
          let listData=this.state.listData
          listData.ligand=e
          this.setState({
            listData
          })
      }
    
    callback(){

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

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

      
      
    }
  render() {
    const {visible,panelList, name,pdbId,DetailsData,getStructureList}=this.state
    const formItemLayout ={
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    }
  const columns = [
    {
      title: 'Target name',
      dataIndex: 'Target name',
      key: 'Target name',
      render: (item,record )=> (
              <Tag color="blue" onClick={()=>{this.getOne(record)}} >
                {record['Target name']}
              </Tag>
      ),
      
    },
    {
      title: 'Class',
      dataIndex: 'Class',
      key: 'Class',
    },
    {
      title: 'Family',
      dataIndex: 'Family',
      key: 'Family',
    },
 
    {
      title: 'Uniport id',
      dataIndex: 'Uniport id',
      key: 'Uniport id',
    },
    {
      title: 'PDB',
      dataIndex: 'PDB',
      render: PDB => (
        <span>
          {PDB.map(item => {
            return (
              <Tag color="blue" key={item} onClick={()=>{this.getTag(item)}} >
                {item.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
    },
    {
      title: 'sequence',
      dataIndex: 'sequence',
      key: 'sequence',
      render: sequence => (
        <span>
          {
            <Tooltip placement="topLeft" title={sequence}>
            <Button>Sequence</Button>
          </Tooltip>
          }
        </span>
      ),
    },
  ];
  const columns2 = [
    {
      title: 'Indication',
      dataIndex: 'Indication',
      key: 'Indication',
    },
    {
      title: 'Target',
      dataIndex: 'Target',
      key: 'Target',
    },
    {
      title: 'Status',
      dataIndex: 'Status',
      key: 'Status',
    },
    {
      title: 'Clinical phase',
      dataIndex: 'Clinical phase',
      key: 'Clinical phase',
    },
    {
      title: 'Clinical status',
      dataIndex: 'Clinical status',
      key: 'Clinical status',
    },
    {
      title: 'Year of approval',
      dataIndex: 'Year of approval',
      key: 'Year of approval',
    },
  
    {
      title: 'Mechanism of Action',
      dataIndex: 'Mechanism of Action',
      key: 'Mechanism of Action',
    },
    
    {
      title: 'References',
      dataIndex: 'References',
      render: References => (
        <span>
          {References.map(item => {
            return (
              <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
                {item.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
    },
  ];
  const columns3 = [
    {
      title: 'Target',
      dataIndex: 'Target',
      render: (item,record )=> (
        <Tag color="blue" onClick={()=>{this.getOne(record.Target)}} >
          {record.Target.name}
        </Tag>
      ),
    },
    {
      title: 'Type',
      dataIndex: 'Type',
      key: 'Type',
    },
    {
      title: 'Action',
      dataIndex: 'Action',
      key: 'Action',
    },
    {
      title: 'Value',
      dataIndex: 'Value',
      key: 'Value',
    },
    {
      title: 'Parameter',
      dataIndex: 'Parameter',
      key: 'Parameter',
    },
    {
      title: 'Reference',
      dataIndex: 'Reference',
      key: 'Reference',
      render: References => (
        <span>
          {References&&References.map(item => {
            return (
              <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
                {item.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
    },
    // {
    //   title: 'Year of approval',
    //   dataIndex: 'Year of approval',
    //   key: 'Year of approval',
    // },
    // {
    //   title: 'References',
    //   dataIndex: 'References',
    //   render: References => (
    //     <span>
    //       {References.map(item => {
    //         return (
    //           <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
    //             {item.toUpperCase()}
    //           </Tag>
    //         );
    //       })}
    //     </span>
    //   ),
    // },
  ];
  const columnsChain=[
    {
      title: 'Chain_name',
      dataIndex: 'Chain_name',
      key: 'Chain_name',
    },
    {
      title: 'Chain_ID',
      dataIndex: 'Chain_ID',
      key: 'Chain_ID',
    },
    
    {
      title: 'code',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: 'code_type',
      dataIndex: 'code_type',
      key: 'code_type',
    },
    {
      title: 'res_start',
      dataIndex: 'res_start',
      key: 'res_start',
    },
    {
      title: 'res_end',
      dataIndex: 'res_end',
      key: 'res_end',
    },
  ]
  let DetailsDataList= Object.entries(DetailsData);
      const DataList= DetailsDataList.map(
          (item,index)=>{
            return(
              
              <div key={index}>
                    <div className='div-list'key={index} >
                    <div className='list-one'>
                    <div>{item[0]}</div>
                    <div className={item[0]!='smiles'?'':'isShowDiv'} >{item[1]}
                    </div>
                    </div>
                    <Divider />
                  </div>
               
              </div>
              
            
            
            )
           
          }
          
        )
      const PanelList= Object.keys(panelList).map((item,index)=>{
        
        console.log(item);
        
        // console.log(typeof panelList[item]);
        // console.log( Array.isArray(panelList[item]));
       
        return(
          <Collapse defaultActiveKey={Object.keys(panelList)} key={index} onChange={this.callback}>
          <Panel header={item} key={item}>
            {
              
                <div  className={item==='Target'?'':'isShowDiv'}>
                    <Table
                  bordered
                  rowKey='item'
                  dataSource={panelList.Target}
                  pagination={false}
                  columns={columns}
                />
                </div>
            }
             {
              
              <div  className={item==='Indication'?'':'isShowDiv'}>
                  <Table
                    bordered
                    rowKey='item'
                    dataSource={panelList.Indication}
                    pagination={false}
                    columns={columns2}
                  />
              </div>
          }
          {
              
              <div  className={item==='Bioassay'?'':'isShowDiv'}>
                      <Table
                bordered
                rowKey='item'
                dataSource={panelList.Bioassay}
                pagination={false}
                columns={columns3}
              />
              </div>
           
            
        
          }
           { 
          item==='Structure'&&( 
            
                       <Tabs defaultActiveKey="0" type="card" tabPosition='left' onChange={this.ChangeTabs}>
                         
                         {
                          panelList.Structure.map((item,index)=>{
                            return(
                              <TabPane tab={(item.pdb)+' ('+(item.type)+')'} key={item.pdb}>
                                <div className='TabPane-center'>
                                <div className='Molstar-div2'>
                                <Molstar pdbId={item.pdb} />
                                </div>
                                <div className='Structure-right'>
                                <Form layout="horizontal">
                                  <Form.Item label="详情" {...formItemLayout} >
                                    <div>
                                    method: {getStructureList.method}
                                    </div>
                                    <div>
                                    name: {getStructureList.name}
                                    </div>
                                    <div>
                                    pdb_datatime: {getStructureList.pdb_datatime}
                                    </div>
                                    <div>
                                    resolution: {getStructureList.resolution}
                                    </div>
                                  </Form.Item>
                                  <Form.Item label="配体列表" {...formItemLayout} >
                                    {
                                      getStructureList.ligand_up_list&& getStructureList.ligand_up_list.map((item,index)=>{
                                         return(
                                          <Popover key={index} content={ <div key={index}>
                                          
                                              <div style={{width:'100px', wordWrap: 'break-word', wordBreak: 'normal'}}>
                                              {item.comp_name}
                                              </div>
                                            
                                            <Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={item.smiles} />
                                          </div>}>
                                        
                                        {(<Button type="primary" style={{marginRight:'5px'}}>{item.name}</Button>)}
                                      </Popover>
                                         )
                                       })
                                    }
                            
                                  </Form.Item>
                                  <Form.Item label="配体选择" {...formItemLayout} >
                                  <Select style={{ width: 250 }} value={this.state.listData.ligand}  size="large" onChange={this.LigandChange}>
                                        {
                                         getStructureList.ligand_list&& getStructureList.ligand_list.map(
                                            (item,index)=>{
                                              return(
                                                <Option key={index} value={item}>{item}</Option>
                                              )
                                            
                                            }
                                          )
                                        }
                                    </Select>
                            
                                  </Form.Item>
                                  <Form.Item label="搜索半径" {...formItemLayout} >
                                  <InputNumber style={{ width: 250 }} min={getStructureList.resolution} max={10} placeholder={'请输入大于resolutiond数字'}  step={0.1} size="large"  onChange={this.getResolutionData} />
                                  </Form.Item>
                                  <Form.Item label="References " {...formItemLayout} >
                                  {
                                      getStructureList.References&& getStructureList.References.map((item,index)=>{
                                         return(
                                        (<Button type="primary" onClick={()=>{this.getReferences(item)}} key={index} style={{marginRight:'5px'}}>{item}</Button>)
                                      
                                         )
                                       })
                                    }
                                  </Form.Item>
                                  <Form.Item label=" " {...formItemLayout} >
                                  <Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large'  loading={this.state.loading}  onClick={this.getList}>Search</Button>
                            
                                  </Form.Item>
                                </Form>
                                </div>
                                </div>
                                <Table
                                        bordered
                                        rowKey='item'
                                        dataSource={getStructureList.chain}
                                        pagination={false}
                                        columns={columnsChain}
                                      />
                                
                            </TabPane>
                            )
                         
                          })
                             
                         }
                   
                    </Tabs>
                  
           )
          
            
              
          }
          <div className='112'>
          {
             
             Object.prototype.toString.call(panelList[item]) === '[object Object]'&& Object.entries(panelList[item]).map((item2,index2)=>
             {
               

               if (typeof item2==='string' ) {
                  return( <div>
                    {item2[0]}:{item2[1]}
                  </div>
                  )
                  
               }
               if ( item==='Biological propeties') {
                 
                 return(
                   <div className='div-list'key={index2} >
                     <div className='list-one'>
                     
                     <div>{item2[0]}</div>
                     <div className={item2[0]!='smiles'?'':'isShowDiv'} >{item2[1]}
                     </div>
                     </div>
                     <Divider />
                 </div>
                 
                 )
                 
               }
             })

         }
         <div className='Calcilated'>
         {
             
             Object.prototype.toString.call(panelList[item]) === '[object Object]'&& Object.entries(panelList[item]).map((item2,index2)=>
             {
               

               if (typeof item2==='string' ) {
                  return( <div>
                    {item2[0]}:{item2[1]}
                  </div>
                  )
                  
               }
             
               if (item==='Calculated propeties') {
                 return(
                
                    <div className='div-list2'key={index2} >
                     <div className='list-one2'>
                     
                     <div>{item2[0]}:</div>
                     <div className={item2[0]!='smiles'?'':'isShowDiv'} >{item2[1]}
                     </div>
                     </div>
                   </div>
                 
                 )
                 
               }
              
 
             })

         }

         </div>
         

          </div>
          
           
           </Panel>
          </Collapse>
        )
       
      })

    return (
    
      <div className='search-details-div'>
            <Modal
                footer={null} closable={false}
                width={850}
                visible={visible}
                wrapClassName="vertical-center-modal"
                onCancel={() => this.setState({visible: false})}>
               <div className='Molstar-div'>
               <Molstar file={this.state.fileData} />
               </div>
            </Modal>
            <Spin tip="Loading..." size='large' spinning={this.state.loading}>
                <Card hoverable>
                    <div >
                          <div className='title-div'>
                            {name}
                          </div>
                          <div className='title-div-top'> 
                            
                            <div className='DataList-left'>
                            {DataList}
                            </div>
                            <div className='Jsme-div'>
                            <Jsme height="300px" width="300px" options="depict,useopenchemlib" smiles={this.state.DetailsData.smile} />
                            </div>
                        
                          
                        
                          </div>
                        
                    </div>
              
                </Card>
                {PanelList}
                {/* <Collapse defaultActiveKey={['1','2','3']} onChange={this.callback}>
                  <Panel header="Structures" key="1">
                  <p>{text}</p>
                  </Panel>
                  <Panel header="Names and Identifiers" key="2">
                  <p>{text}</p>
                  </Panel>
                  <Panel header="Computed Descriptors" key="3">
                  <p>{text}</p>
                  </Panel>
              </Collapse> */}
          </Spin>

      </div>
    )
  }
}
