import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography,Pagination} 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;
const { Title } = Typography;


export default class TargetDetails extends Component {
    state = {
      name:'',
      Structure:[],
        dataOne:qs.parse(this.props.location.search.slice(1)),
        visible:false,
        pdbId:'6f6s',
        DetailsData:{
          PubChemCID:5462310,
          MolecularWeight:12.011,
          smiles:'cccc'
        },
        panelList:{
            Bioassay:[]

        },
        statusMutation:0,
        OLDMutationList:[],
        
        targetsDetail:{
            Structure:[],
            Sequence:''
        },
        loading:true,
        getStructureList:{
          ligand_up_list:[],
          ligand_list:[],
          chain:[],
          References:[]
        },
        listData:{
          pdb_code: '',
          ligand: '',
          resolution: 0
        },
        fileData:{
          filestring:'',
          type:'pdb'
        },
        BioassaySearch:{
          page:1,
          page_size:10,
          dataid:qs.parse(this.props.location.search.slice(1)).dataid
          
        },
        total_num:0,
     
    };
    componentDidMount(){
      this.getDetails()
    }
    getDetails(){
      // this.setState({loading:true})
      this.setState({loading:true})
      request.post('/kinase_target_detail', this.props.location.search.slice(1) )
      .then(res => {
        this.setState({loading:false})
        if (res.data.code===200) {
          console.log(res);

          let data=res.data.data
          this.setState({targetsDetail:data})
          this.setState({OLDMutationList:data.Mutation})
        
          this.setState({loading:false})
          let StructureList=res.data.data.Structure
          if (StructureList.length>0) {
            this.getStructure(StructureList[0].pdb)
            
          }
          this.getBioassayList()
           
         
        }else{
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        console.error(err); 
      })
    }
    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)=>{
      var str = e; 
      var n = str.search(/CHEMBL/i);
     if (n===-1) {
       window.open(`https://www.doi.org/${e}`)
     } else {
      window.open(`https://www.ebi.ac.uk/chembl/document_report_card/${e}`)
     }
      
      
      
  }
  onShowSizeChange=(current, pageSize)=> {
      let BioassaySearch = this.state.BioassaySearch;
      BioassaySearch.page=current
      BioassaySearch.page_size=pageSize
      this.setState({
        BioassaySearch
      })
      this.getBioassayList()
   

  }
  onChange=(current, pageSize)=>{
  
      let BioassaySearch = this.state.BioassaySearch;
      BioassaySearch.page=current
      BioassaySearch.page_size=pageSize
      this.setState({
        BioassaySearch
      })
      
      this.getBioassayList()
 
    
   

  }
  onChangeRadio=(e)=>{
    let OLDMutationList= this.state.targetsDetail.Mutation
    this.setState({
        OLDMutationList:OLDMutationList
    })
    let value=e.target.value
    this.setState({
        statusMutation:value
    })
    if (value===0) {
        OLDMutationList=this.state.targetsDetail.Mutation
        this.setState({
            OLDMutationList:OLDMutationList
        })
        
    }
    if (value===1) {
      let MutationList1= OLDMutationList.filter((item)=>{
               return item.status===1
        })
     
        this.setState({
            OLDMutationList:MutationList1
        })
    }
    if (value===2) {
        let MutationList2= OLDMutationList.filter((item)=>{
            return item.status===2
           
     })

     this.setState({
        OLDMutationList:MutationList2
     })
        
    }

  }
  getDrug=(e)=>{
      console.log(e);
      let data={
        dataid:e
      }
        this.props.history.push({ pathname: '/Kinase/SearchDetails', search: qs.stringify(data)})
  }
  
    
    callback(){

    }
    childTargetClassChange=()=>{

    }
    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)=>{
      let listData=this.state.listData
      listData.ligand=''
      this.setState({
        listData:listData
      })
      this.getStructure(e)
    }
    getList=()=>{
      let fileData=this.state.fileData
      fileData.filestring=''
      this.setState({
        fileData:fileData
      })
      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:fileData
        })
        
         this.setState({
        visible:true
      })
         
        this.setState({loading:false})
        this.getBioassayList()
       
      })
      .catch(err => {
        console.error(err); 
      })

    }
    getBioassayList=()=>{
      console.log( this.state.dataOne);
      const{dataid}=this.state.dataOne
      this.setState({loading:true})
      request.post('/kinase_target_detail/bioassay', qs.stringify(this.state.BioassaySearch) )
      .then(res => {
        this.setState({loading:false})
        if (res) {
          console.log(res);
          let targetsDetail=this.state.targetsDetail
          targetsDetail.Bioassay=res.data.data
          this.setState({total_num:res.data.total_num})
          this.setState({
            targetsDetail:targetsDetail
          })
        }
       
     
       
      })
      .catch(err => {
        console.error(err); 
      })

    }
    getResolutionData=(e)=>{
      console.log(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
        })
    }
    getOne(e){
        let dataid=e.data_id
        let datatype=e.data_type
      let data={
        dataid,
        datatype
      }

      if (datatype==='kinase_drug') {
        this.props.history.push({ pathname: '/Kinase/SearchDetails', search: qs.stringify(data)})
        return
      }
      if (datatype==='kinase_ligand') {
        this.props.history.push({ pathname: '/Kinase/LigandDetails', search: qs.stringify(data)})
        return
      }
   
      
    }
  render() {
    const {visible,total_num, name,pdbId,targetsDetail,getStructureList}=this.state

  const columnsBioassay = [
    {
      title: 'Structure',
      dataIndex: 'Structure',
      key: 'Structure',
      render: Structure => (
        <Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={Structure} />
          ),
    },
    {
      title: 'ligand Name',
      dataIndex: 'ligand_name',
      key: 'ligand_name',
      render: (item,record )=> (
        <Tag color="blue" onClick={()=>{this.getOne(record)}} >
          {record['ligand_name']}
        </Tag>
),
    },
    {
      title: 'Assay type',
      dataIndex: 'assay_type',
      key: 'assay_type',
    },
    {
      title: 'Measure type',
      dataIndex: 'measure_type',
      key: 'measure_type',
    },
    {
      title: 'Operator',
      dataIndex: 'operator',
      key: 'operator',
    },
    {
      title: 'Value',
      dataIndex: 'value',
      key: 'value',
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: 'Reference',
      dataIndex: 'Reference',
      key: 'Reference',
      render: Reference => (
        <span>
          {Reference.map(item => {
            return (
              <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
                {item.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
      
 
    },
   
  ];
  const formItemLayout ={
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
  }

  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',
    },
  ]
    return (
      <div className='search-details-div'>
            <Modal
                footer={null} closable={false}
                width={550}
                visible={visible}
                wrapClassName="vertical-center-modal"
                onCancel={() => this.setState({visible: false})}>
               <div className='Molstar-div'>
               <Molstar pdbId={this.state.pdbId}/>
               </div>
            </Modal>
            <Spin tip="Loading..." size='large' spinning={this.state.loading}>
                <Card hoverable>
                    <div >
                          <div className='title-div'>
                            {targetsDetail.name}
                          </div>
                          <div className='title-div-top'> 
                            
                            <div className='DataList-left'>
                            <div >
                            <div className='div-list'>
                            <div className='list-one'>
                            <div>Gene name</div>
                            <div >
                            </div>
                            {targetsDetail['Gene name']}
                            </div>
                            <div className='list-one'>
                            <div>Species</div>
                            <div >
                            </div>
                            {targetsDetail.Species}
                            </div>
                            <div className='list-one'>
                            <div>Uniprot id</div>
                            <div >
                            </div>
                            {targetsDetail.Uniport_id}
                            </div>
                            <div className='list-one'>
                            <div>Group</div>
                            <div >
                            </div>
                            {targetsDetail.Group}
                            </div>
                            <div className='list-one'>
                            <div>Family</div>
                            <div >
                            </div>
                            {targetsDetail.Family}
                            </div>
                  </div>
               
              </div>
                            </div>
                          </div>
                        
                    </div>
              
                </Card>
                {/* {PanelList} */}
                <Collapse defaultActiveKey={['1','2','3','4','5']} onChange={this.callback}>
                  <Panel header="Sequence" key="1">
                  <div className='Sequence-div'>
                  {targetsDetail.Sequence&&targetsDetail.Sequence.split("").map((item,index)=>{
                      // console.log(item);
                      //   console.log(Object.entries(item));
                        return(
                          <div className='Sequenceone-div' key={index}>
                          
                            <div className='zimu-div'>
                            {  <div className={'res-color-'+item.thum}>
                                  {item}
                                </div>}
                            </div>
                         
                          </div>
                        )
                  })

                  }
                  
                  </div>
                 
                  </Panel>
                  <Panel header="Structure" key="2">
                  <Tabs defaultActiveKey="0" type="card"  tabPosition='left' onChange={this.ChangeTabs}>
                         {
                         targetsDetail.Structure.map((item,index)=>{
                           console.log(item);
                            return(

                              <TabPane tab={(item.pdb)} 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 content={ <div>
                                          
                                              <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="Search" {...formItemLayout} >
                                  <Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large'  loading={this.state.loading} disabled={getStructureList.ligand_list.length===0}  onClick={this.getList}>Search</Button>
                            
                                  </Form.Item>
                                 
                                </Form>
                                </div>
                                </div>
                                <Table
                                        bordered
                                        rowKey='item'
                                        dataSource={getStructureList.chain}
                                        pagination={false}
                                        columns={columnsChain}
                                      />
                               
                            </TabPane>
                            
                            )
                         
                          })
                             
                         }
                   
                    </Tabs>
                  </Panel>
                  {/* <Panel header="Mutation" key="3">
                        <div className='Radio-div'>
                        <Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
                        <Radio value={0}>Full data</Radio>
                        <Radio value={1}>Increase only</Radio>
                        <Radio value={2}>Decrease only</Radio>
                        </Radio.Group>
                        </div>
              
                  <Table
                        bordered
                        rowKey='item'
                        dataSource={OLDMutationList}
                        pagination={false}
                        columns={columnsMutation}
                    />
                  </Panel>
                  <Panel header="Drug & Clinical information" key="4">
                  <Table
                        bordered
                        rowKey='item'
                        dataSource={targetsDetail['Drugs information']}
                        pagination={false}
                        columns={columnsDrug}
                    />
                  </Panel> */}
                  <Panel header="Bioassay" key="5">
                  <Spin tip="Loading..." size='large' spinning={this.state.loading}>
                        <Table
                      bordered
                      rowKey='item'
                      dataSource={targetsDetail.Bioassay}
                      pagination={false}
                      columns={columnsBioassay}
                    />
                    
                      <Pagination
                        showSizeChanger
                        onShowSizeChange={this.onShowSizeChange}
                        onChange={this.onChange}
                        total={total_num}
                    />
                    </Spin>
                  </Panel>
                
                  
              </Collapse>
          </Spin>

      </div>
    )
  }
}
