import React, { Component } from 'react'
import { Card, Tooltip, Pagination, message, Popover, 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: [],
      Bioassay: [],
      Target: []
    },
    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

    },
    TargetSearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid

    },
    total_num: 0,
    total_num2: 0,

  };
  componentDidMount () {
    this.getDetails()

  }
  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()




  }
  onShowSizeChange2 = (current, pageSize) => {
    let TargetSearch = this.state.TargetSearch
    TargetSearch.page = current
    TargetSearch.page_size = pageSize
    this.setState({
      TargetSearch
    })
    this.getTargetList()


  }
  onChange2 = (current, pageSize) => {

    let TargetSearch = this.state.TargetSearch
    TargetSearch.page = current
    TargetSearch.page_size = pageSize
    this.setState({
      TargetSearch
    })

    this.getTargetList()




  }
  getBioassayList = () => {
    console.log(this.state.dataOne)
    const { dataid } = this.state.dataOne
    this.setState({ loading: true })
    request.post('/kinase_ligand_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_num2: res.data.total_num })
          this.setState({
            targetsDetail: targetsDetail
          })
        }



      })
      .catch(err => {
        console.error(err)
      })

  }
  getTargetList = () => {
    console.log(this.state.dataOne)
    const { dataid } = this.state.dataOne
    this.setState({ loading: true })
    request.post('/kinase_ligand_detail/target', qs.stringify(this.state.TargetSearch))
      .then(res => {
        this.setState({ loading: false })
        if (res) {
          console.log(res)
          let targetsDetail = this.state.targetsDetail
          targetsDetail.Target = res.data.data
          this.setState({ total_num: res.data.total_num })
          this.setState({
            targetsDetail: targetsDetail
          })
        }



      })
      .catch(err => {
        console.error(err)
      })

  }
  getDetails () {
    // this.setState({loading:true})
    this.setState({ loading: true })
    request.post('kinase_ligand_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 })
          this.getBioassayList()
          this.getTargetList()
          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
    })
    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
    })
  }
  getOne (e) {
    console.log(e)
    const { dataid, } = e
    let data = {
      dataid
    }


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



  }
  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}`)
    }



  }
  render () {
    const { visible, total_num, total_num2, getStructureList, targetsDetail, CalculatedPropeties } = this.state
    const columnsBioassay = [
      {
        title: 'Target',
        dataIndex: 'target_name',
        key: 'target_name',
        render: (item, record) => (
          <Tag color="blue" onClick={() => { this.getOne(record) }} >
            {record['target_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 columns = [
      {
        title: 'Target',
        dataIndex: 'target_name',
        key: 'target_name',
        render: (item, record) => (
          <Tag color="blue" onClick={() => { this.getOne(record) }} >
            {record['target_name']}
          </Tag>
        ),

      },
      {
        title: 'Uniport id',
        dataIndex: 'uniport_id',
        key: 'uniport_id',
      },
      {
        title: 'Group',
        dataIndex: 'group',
        key: 'group',
      },
      {
        title: 'Family',
        dataIndex: 'family',
        key: 'family',
      },

      {
        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 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',
      },
    ]
    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 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 className='left-title'>Iupac name</div>
                            <div >
                            </div>
                            {targetsDetail.Iupac_name}
                            </div> */}
                      <div className='list-one'>
                        <div className='left-title'>chEMBL ID</div>
                        <div >
                        </div>
                        {targetsDetail.chembl_id}
                      </div>
                      <div className='list-one'>
                        <div className='left-title'>Smiles</div>
                        <div >
                        </div>
                        {targetsDetail.smiles}
                      </div>

                    </div>

                  </div>
                </div>
                <div className='Jsme-div'>
                  <Jsme height="300px" width="300px" options="depict,useopenchemlib" smiles={targetsDetail.smiles} />
                </div>
              </div>

            </div>

          </Card>
          {/* {PanelList} */}
          <Collapse defaultActiveKey={['1', '2', '3', '4']} onChange={this.callback}>
            <Panel header="Target" key="1">
              <Table
                bordered
                rowKey='item'
                dataSource={targetsDetail.Target}
                pagination={false}
                columns={columns}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange2}
                onChange={this.onChange2}
                total={total_num}
              />
            </Panel>

            <Panel header="Bioassay" key="2">
              <Table
                bordered
                rowKey='item'
                dataSource={targetsDetail.Bioassay}
                pagination={false}
                columns={columnsBioassay}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange}
                onChange={this.onChange}
                total={total_num2}
              />
            </Panel>
            <Panel header="Calculated propeties" key="3">

              <div >
                <div className='Calcilated'>
                  <div className='list-one2'>
                    <div>Molecular weight:</div>
                    <div >
                    </div>
                    {CalculatedPropeties.Molecular_weight}
                  </div>
                  <div className='list-one2'>
                    <div>LogP:</div>
                    <div >
                    </div>
                    {CalculatedPropeties.logP}
                  </div>
                  <div className='list-one2'>
                    <div>Hydrogen bond donor: </div>
                    <div >
                    </div>
                    {CalculatedPropeties.Hydrogen_bond_donor}
                  </div>
                  <div className='list-one2'>
                    <div>Hydrogen bond acceptor:</div>
                    <div >
                    </div>
                    {CalculatedPropeties.Hydrogen_bond_acceptor}
                  </div>
                  <div className='list-one2'>
                    <div>Rotatable bond:  </div>
                    <div >
                    </div>
                    {CalculatedPropeties.Rotatable_bond}
                  </div>
                  <div className='list-one2'>
                    <div>sp3 Carbon:   </div>
                    <div >
                    </div>
                    {CalculatedPropeties.Sp3_Carbon}
                  </div>
                </div>

              </div>
            </Panel>
            <Panel header="Structure" key="4">
              <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>

          </Collapse>
        </Spin>

      </div>
    )
  }
}
