import React, { Component } from 'react'
import { Card, Tooltip, Pagination, 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


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'
    },
    BioassaySearch: {
      page: 1,
      page_size: 10,
      dataid: qs.parse(this.props.location.search.slice(1)).dataid

    },


  };
  componentDidMount () {
    this.getDetails()

  }
  getTargetList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request.post('/gpcr/targets_search', qs.stringify(this.state.smilesData))
      .then(res => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.setState({ smilesList: res.data.data })
          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false }
          )

        } else {
          message.error(res.data.msg)
        }
      })
      .catch(err => {
        console.error(err)
      })
  }
  getDetails () {
    // this.setState({loading:true})
    this.setState({ loading: true })
    request.post('/gpcr/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.getBioassayList()
          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
    })
  }
  getOne (e) {
    const { dataid, } = e
    let data = {
      dataid
    }


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

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



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

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




  }
  render () {
    const { visible, total_num, Structure, OLDMutationList, name, pdbId, targetsDetail, CalculatedPropeties } = this.state
    const columnsBioassay = [
      {
        title: 'Target',
        dataIndex: 'Target',
        key: 'Target',
        render: (item, record) => (
          <Tag color="blue" onClick={() => { this.getOne(record) }} >
            {record.Target_name}
          </Tag>
        ),
      },
      {
        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.datatype}
                      </div>
                      <div className='list-one'>
                        <div className='left-title'>Smiles</div>
                        <div >
                        </div>
                        {targetsDetail.smiles}
                      </div>

                    </div>

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

                </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}
              /> */}
              <Table
                bordered
                rowKey="dataid"
                dataSource={targetsDetail.Bioassay}
                pagination={false}
                columns={columnsBioassay}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange}
                onChange={this.onChange}
                total={total_num}
              />
            </Panel>
            <Panel header="Calculated propeties" key="2">
              <div>
                <div className="Calcilated">
                  <div className="list-one2">
                    <div>Molecular weight:</div>
                    <div />
                    {CalculatedPropeties.Molecular_weight}
                  </div>
                  <div className="list-one2">
                    <div>LogP:</div>
                    <div />
                    {CalculatedPropeties.logP}
                  </div>
                  <div className="list-one2">
                    <div>Hydrogen bond donor: </div>
                    <div />
                    {CalculatedPropeties.Hydrogen_bond_donor}
                  </div>
                  <div className="list-one2">
                    <div>Hydrogen bond acceptor:</div>
                    <div />
                    {CalculatedPropeties.Hydrogen_bond_acceptor}
                  </div>
                  <div className="list-one2">
                    <div>Rotatable bond: </div>
                    <div />
                    {CalculatedPropeties.Rotatable_bond}
                  </div>
                  <div className="list-one2">
                    <div>sp3 Carbon: </div>
                    <div />
                    {CalculatedPropeties.Sp3_Carbon}
                  </div>
                </div>
              </div>
            </Panel>

          </Collapse>
        </Spin>

      </div>
    )
  }
}
