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 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'
        }
     
    };
    componentDidMount(){
      this.getDetails()
    }
    getDetails(){
      // this.setState({loading:true})
      this.setState({loading:true})
      request.post('/targets_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)
            
          }
           
         
        }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)=>{
      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
      })

        // 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,getStructureList}=this.state
  const columnsDrug = [
    {
      title: 'Drug Structure',
      dataIndex: 'Drug Structure',
      key: 'Drug Structure',
      render: DrugStructure => (
        <Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={DrugStructure} />
          ),
    },
    
    {
      title: 'Drug name',
      dataIndex: 'Drug name',
      key: 'Drug name',
      render: (item,record) => (
        <Button type="primary" onClick={()=>this.getDrug(record.Drug_dataid)}>{item}</Button>
          ),
    },
    {
      title: 'Drug Type',
      dataIndex: 'Drug type',
      key: 'Drug type',
    },
    {
      title: 'Indication',
      dataIndex: 'Indication',
      key: 'Indication',
    },
    {
        title: 'Mechanism of Action',
        dataIndex: 'Mechanism of Action',
        key: 'Mechanism of Action',
      },
      {
        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: 'References',
        dataIndex: 'References',
        key: 'References',
        render: References => (
        <span>
          {References.map(item => {
            return (
              <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
                {item.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
      },
  ];
  const columnsBioassay = [
    {
      title: 'Structure',
      dataIndex: 'smile',
      key: 'smile',
      render: smile => (
        <Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={smile} />
          ),
    },
    {
      title: 'Compound name',
      dataIndex: 'Compound name',
      key: 'Compound name',
    },
    {
      title: 'Type',
      dataIndex: 'Type',
      key: 'Type',
    },
    {
      title: 'Action',
      dataIndex: 'Action',
      key: 'Action',
    },
    {
      title: 'Parameter',
      dataIndex: 'Parameter',
      key: 'Parameter',
    },
    {
      title: 'Value',
      dataIndex: 'Value',
      key: 'Value',
    },
    {
      title: 'References',
      dataIndex: 'References',
      key: 'References',
      render: References => (
        <span>
          {References.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 columnsMutation = [
    {
      title: 'Generic number',
      dataIndex: 'Generic',
      key: 'Generic',
    },
    {
      title: 'Position',
      dataIndex: 'Position',
      key: 'Position',
    },
    {
      title: 'Segment',
      dataIndex: 'Segment',
      key: 'Segment',
    },
    {
      title: 'Mutation',
      dataIndex: 'Mutation',
      key: 'Mutation',
    },
    {
      title: 'Ligand',
      dataIndex: 'Ligand',
      key: 'Ligand',
      render: Ligand => (
        <Popover content={ <div>
            <Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={Ligand.smile} />
          </div>}>
        
        {Ligand.name!=''&&(<Button type="primary">{Ligand.name}</Button>)}
      </Popover>
          ),
    },
    {
      title: 'Activity type',
      dataIndex: 'Activity type',
      key: 'Activity type',
    },
    {
        title: 'Activity value',
        dataIndex: 'Activity value',
        key: 'Activity value',
      },
      {
        title: 'PercentChange(%)',
        dataIndex: 'Foldchange',
        key: 'Foldchange',
        defaultSortOrder: 'descend',
        sorter: (a, b) =>  a.Foldchange-b.Foldchange
        
      },
 
    // {
    //   title: 'Year of approval',
    //   dataIndex: 'Year of approval',
    //   key: 'Year of approval',
    // },
    {
      title: 'Reference',
      dataIndex: 'Reference',
      render: Reference => (
        <span>
          {Reference.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',
    },
  ]
    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 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>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>Class</div>
                            <div >
                            </div>
                            {targetsDetail.Class}
                            </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.map((item,index)=>{
                      // console.log(item);
                      //   console.log(Object.entries(item));
                        return(
                          <div className='Sequenceone-div' key={index}>
                            {Object.entries(item)[0][0]}
                            <div className='zimu-div'>
                            {Object.entries(item)[0][1].map((item2,index2)=>{
                              console.log(item2);
                              return(
                                <Tooltip placement="top" key={index2} title={item2.title}>
                                 <div className={'res-color-'+item2.thum}>
                                  {item2.thum}
                                </div>
                              </Tooltip>
                               
                              )
                            })}
                            </div>
                         
                          </div>
                        )
                  })

                  }
                  
                  </div>
                 
                  </Panel>
                  <Panel header="Structure" key="2">
                  <Tabs defaultActiveKey="0" type="card" tabPosition='left' onChange={this.ChangeTabs}>
                         {
                         targetsDetail.Structure.map((item,index)=>{
                            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 imformation" key="4">
                  <Table
                        bordered
                        rowKey='item'
                        dataSource={targetsDetail['Drugs information']}
                        pagination={false}
                        columns={columnsDrug}
                    />
                  </Panel>
                  <Panel header="Bioassay" key="5">
                  <Table
                bordered
                rowKey='item'
                dataSource={targetsDetail.Bioassay}
                pagination={false}
                columns={columnsBioassay}
              />
                  </Panel>
                  
              </Collapse>
          </Spin>

      </div>
    )
  }
}
