import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} 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 LigandDetails 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:[],
        CalculatedPropeties:{},
        targetsDetail:{
            Structure:[],
            Sequence:[]
        },
        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('/ligands_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({CalculatedPropeties:data.Calculated_propeties})
          
          this.setState({OLDMutationList:data.Mutation})
        
          this.setState({loading:false})
          
           
         
        }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)=>{
      window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
  }
  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: '/home/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)=>{
      this.getStructure(e)
    }
    getList=()=>{
      let fileData=this.state.fileData
      fileData.filestring=''
      this.setState({
        fileData:fileData
      })

        // if (this.state.listData.ligand==='') {
        //   message.warning('输入查询条件');
        //   return
        // }
        // if (this.state.getStructureList.resolution>this.state.listData.resolution) {
        //   message.warning('搜索半径不能小于resolution');
        //   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:fileData
        })
        
         this.setState({
        visible:true
      })
         
        this.setState({loading:false})
        console.log(this.state.fileData);
       
      })
      .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
        })
    }
  render() {
    const {visible,panelList,Structure,OLDMutationList, name,pdbId,targetsDetail,CalculatedPropeties}=this.state
  const columnsBioassay = [
    {
      title: 'Target',
      dataIndex: 'Target',
      key: 'Target',
    },
    {
      title: 'Assay Type',
      dataIndex: 'Assay_Type',
      key: 'Assay_Type',
    },
    {
      title: 'Min affinity',
      dataIndex: 'Min_affinity',
      key: 'Min_affinity',
    },
    {
      title: 'Max affinity',
      dataIndex: 'Max_affinity',
      key: 'Max_affinity',
    },
    {
      title: 'Average affinity',
      dataIndex: 'average_affinity',
      key: 'average_affinity',
    },
    {
      title: 'Affinity unit',
      dataIndex: 'Affinity_unit',
      key: 'Affinity_unit',
    }
   
  ];
  const formItemLayout ={
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
  }
    return (
      <div className='LigandDetails-div'>
            <Modal
                footer={null} closable={false}
                width={550}
                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'>
                            {targetsDetail.name}
                          </div>
                          <div className='title-div-top'> 
                            
                            <div className='DataList-left'>
                            <div >
                            <div className='div-list'>
                            <div className='list-one'>
                            <div className='left-title'>Iupac name</div>
                            <div >
                            </div>
                            {targetsDetail.Iupac_name}
                            </div>
                            <div className='list-one'>
                            <div className='left-title'>Ligand type</div>
                            <div >
                            </div>
                            {targetsDetail.Ligand_type}
                            </div>
                            <div className='list-one'>
                            <div className='left-title'>Smiles</div>
                            <div >
                            </div>
                            {targetsDetail.smile}
                            </div>
                           
                            </div>
                        
                        </div>
                            </div>
                            <div className='Jsme-div'>
                            <Jsme height="300px" width="300px" options="depict,useopenchemlib" smiles={targetsDetail.smile} />
                            </div>
                          </div>
                        
                    </div>
              
                </Card>
                {/* {PanelList} */}
                <Collapse defaultActiveKey={['1','2']} onChange={this.callback}>
                
                  <Panel header="Bioassay" key="1">
                  <Table
                        bordered
                        rowKey='item'
                        dataSource={targetsDetail.Bioassay}
                        pagination={false}
                        columns={columnsBioassay}
                    />
                  </Panel>
                  <Panel header="Calculated propeties" key="2">
                      
                  <div >
                          <div className='title-div-top'> 
                            
                            <div className='DataList-left'>
                            <div >
                            <div className='div-list'>
                            <div className='list-one'>
                            <div>Molecular weight:</div>
                            <div >
                            </div>
                            {CalculatedPropeties.Molecular_weight}
                            </div>
                            <div className='list-one'>
                            <div>LogP:</div>
                            <div >
                            </div>
                            {CalculatedPropeties.logP}
                            </div>
                            <div className='list-one'>
                            <div>Hydrogen bond donor: </div>
                            <div >
                            </div>
                            {CalculatedPropeties.Hydrogen_bond_donor}
                            </div>
                            <div className='list-one'>
                            <div>Hydrogen bond acceptor:</div>
                            <div >
                            </div>
                            {CalculatedPropeties.Hydrogen_bond_acceptor}
                            </div>
                            <div className='list-one'>
                            <div>Rotatable bond:  </div>
                            <div >
                            </div>
                            {CalculatedPropeties.Rotatable_bond}
                            </div>
                            <div className='list-one'>
                            <div>sp3 Carbon:   </div>
                            <div >
                            </div>
                            {CalculatedPropeties.Sp3_Carbon}
                            </div>
                           
                            </div>
                        
                        </div>
                            </div>

                          </div>
                        
                </div>
                  </Panel>
                  
              </Collapse>
          </Spin>

      </div>
    )
  }
}
