import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag, Collapse,Modal,Divider} 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;


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,
     
    };
    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})
         
        }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(){

    }
  render() {
    const {visible,panelList,Structure,OLDMutationList, name,pdbId,targetsDetail}=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>
      ),
      },
         //   render: Reference => (
    //     <span>
    //       {Reference.map(item => {
    //         return (
    //           <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
    //             {item.toUpperCase()}
    //           </Tag>
    //         );
    //       })}
    //     </span>
    //   ),
    // {
    //   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 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 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: 'Foldchange',
        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>
      ),
    },
  ];
    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 pdbId={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>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'>
                            {Object.entries(item)[0][0]}
                            <div className='zimu-div'>
                            {Object.entries(item)[0][1].map((item2,index)=>{
                              console.log(item2);
                              return(
                                <Tooltip placement="top" 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'>
                         {
                         targetsDetail.Structure.map((item,index)=>{
                            return(
                              <TabPane tab={(item.pdb)} key={index}>
                                <div className='Molstar-div2'>
                                <Molstar pdbId={item.pdb} />
                                </div>
                            </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">
                  <Table
                bordered
                rowKey='item'
                dataSource={targetsDetail.Bioassay}
                pagination={false}
                columns={columnsBioassay}
              />
                  </Panel>
                  
              </Collapse>
          </Spin>

      </div>
    )
  }
}
