import React, { Component } from 'react'
import {
  Card,
  Tooltip,
  Pagination,
  message,
  Radio,
  Button,
  Tabs,
  Spin,
  Table,
  Tag,
  Input,
  Collapse,
  Modal,
  Icon,
  Badge,
  Menu,
  Dropdown,
} 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('kinase/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(
        'kinase/ligand_detail',
        qs.parse(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: '/kinase/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: '/kinase/TargetDetails',
      search: qs.stringify(data),
    })
  }
  getBioassayList = () => {
    console.log(this.state.dataOne)
    const { dataid } = this.state.dataOne
    this.setState({ loading: true })
    request
      .post('kinase/ligand_detail/bioassay', qs.parse(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>
        ),
      },
    ]
    const menu = (
      <Menu>
        <Menu.Item>Action 1</Menu.Item>
        <Menu.Item>Action 2</Menu.Item>
      </Menu>
    )
    const expandedRowRender = (e) => {
      console.log(e)
      const { standards } = e
      const columns = [
        {
          title: 'Standard Type',
          dataIndex: 'Standard Type',
          key: 'Standard Type',
        },
        {
          title: 'Standard Relation',
          dataIndex: 'Standard Relation',
          key: 'Standard Relation',
        },
        {
          title: 'Standard Value',
          dataIndex: 'Standard Value',
          key: 'Standard Value',
        },
        {
          title: 'Standard Units',
          dataIndex: 'Standard Units',
          key: 'Standard Units',
        },
        {
          title: 'reference',
          dataIndex: 'reference',
          key: 'reference',
          render: (reference) => (
            <span>
              {
                <Tag color="blue">
                  <a href={reference} />
                  {reference}
                </Tag>
              }
            </span>
          ),
        },
      ]
      return (
        <Table columns={columns} dataSource={standards} pagination={false} />
      )
    }

    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">Title</div>
                        <div />
                        {targetsDetail.name}
                      </div>
                      <div className="list-one">
                        <div className="left-title">Ligand type</div>
                        <div />
                        {targetsDetail.datatype}
                      </div>
                      <div className="list-one">
                        <div className="left-title">Smiles</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="dataid"
                dataSource={targetsDetail.Bioassay}
                pagination={false}
                columns={columnsBioassay}
                expandedRowRender={expandedRowRender}
              />
              <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>
    )
  }
}
