import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from 'antd'
import request from '../../../utils/request'
import qs from 'qs'
import './index.css'
const { TabPane } = Tabs
const { Panel } = Collapse

export default class SearchList extends Component {
  state = {
    smilesList: [],
    visible: false,
    pdbId: '6f6s',
    total_num: 0,
    smilesData: qs.parse(this.props.location.search.slice(1)),
    loading: true,
    TargetState: true,
    ShowDivDataid: null,
  }
  getPdid (e) {
    let data = {
      dataid: e,
    }

    this.props.history.push({
      pathname: '/drugbank/TargetDetails',
      search: qs.stringify(data),
    })
  }
  onShowSizeChange = (current, pageSize) => {
    if (this.state.smilesData.name === 'Drug') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getList()
      return
    }
    if (this.state.smilesData.name === 'Target') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getTargetList()
      return
    }
    if (this.state.smilesData.name === 'Ligand') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getLigandList()
      return
    }
    if (this.state.smilesData.name === 'Mutation') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getMutationList()
      return
    }
  }
  onChange = (current, pageSize) => {
    if (this.state.smilesData.name === 'Drug') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })

      this.getList()
      return
    }
    if (this.state.smilesData.name === 'Target') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getTargetList()
      return
    }
    if (this.state.smilesData.name === 'Ligand') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getLigandList()
      return
    }
    if (this.state.smilesData.name === 'Mutation') {
      let smilesData = this.state.smilesData
      smilesData.page = current
      smilesData.page_size = pageSize
      this.setState({
        smilesData,
      })
      this.getMutationList()
      return
    }
  }
  componentDidMount () {
    console.log(this.state.smilesData)
    if (this.state.smilesData.name === 'Drug') {
      this.getList()
    }
    if (this.state.smilesData.name === 'Target') {
      this.getTargetList()
    }
    // if (this.state.smilesData.name === "Ligand") {
    //   this.getLigandList();
    // }
    // if (this.state.smilesData.name === "Mutation") {
    //   this.getMutationList();
    // }
  }
  getList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request
      .post('/drugbank/drug_search', qs.stringify(this.state.smilesData))
      .then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          let newSmilesList = res.data.data

          newSmilesList.forEach((element) => {
            element.TargetState = true
          })
          this.setState({ smilesList: newSmilesList })

          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }

  getTargetList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request
      .post('/drugbank/target_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)
      })
  }

  getLigandList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request
      .post('/kinase/ligand_search', qs.stringify(this.state.smilesData))
      .then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          console.log(res.data.data)

          this.setState({ total_num: res.data.total_num })
          this.setState({ loading: false })
          let newSmilesList = res.data.data

          newSmilesList.forEach((element) => {
            element.TargetState = true
          })
          this.setState({ smilesList: newSmilesList })
        } else {
          message.error(res.data.msg)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }

  getMutationList () {
    console.log(qs.parse(this.props.location.search.slice(1)))
    this.setState({ loading: true })
    request
      .post('/mutation_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)
      })
  }

  onChangeGroup = (e) => {
    console.log(e)
  }
  getOne (e) {
    console.log(e)
    const { dataid, datatype } = e
    let data = {
      dataid,
      datatype,
    }

    if (this.state.smilesData.name === 'Drug') {
      this.props.history.push({
        pathname: '/drugbank/SearchDetails',
        search: qs.stringify(data),
      })
    }
    if (this.state.smilesData.name === 'Target') {
      this.props.history.push({
        pathname: '/drugbank/TargetDetails',
        search: qs.stringify(data),
      })
    }
    if (this.state.smilesData.name === 'Ligand') {
      this.props.history.push({
        pathname: '/drugbank/LigandDetails',
        search: qs.stringify(data),
      })
    }
    if (this.state.smilesData.name === 'Mutation') {
      this.props.history.push({
        pathname: '/home/MutationDetails',
        search: qs.stringify(data),
      })
    }
  }
  TargetButton = (e, index) => {
    console.log(e.TargetState)
    let newsmilesList = this.state.smilesList

    newsmilesList.forEach((element) => {
      if (element.dataid === e.dataid) {
        element.TargetState = false
      }
    })
    this.setState({
      smilesList: newsmilesList,
    })
  }
  TargetButton2 = (e, index) => {
    console.log(e.TargetState)
    let newsmilesList = this.state.smilesList

    newsmilesList.forEach((element) => {
      if (element.dataid === e.dataid) {
        element.TargetState = true
      }
    })
    this.setState({
      smilesList: newsmilesList,
    })
  }

  render () {
    const {
      smilesList,
      loading,
      ShowDivDataid,
      total_num,
      smilesData,
      TargetState,
    } = this.state

    const listItems = smilesList.map((item, index) => {
      return (
        <Card
          loading={loading}
          hoverable
          extra={<a onClick={() => this.getOne(item)}>{item.name}</a>}
          style={{ width: '100%', marginBottom: '20px' }}
          key={index}>
          <div className="list-div-one">
            <div
              className={
                smilesData.name === 'Drug' || smilesData.name === 'Ligand'
                  ? 'list-div-left'
                  : 'isShowDiv'
              }>
              <Jsme
                height="150px"
                width=""
                options="depict,useopenchemlib"
                smiles={item.smile}
              />
            </div>
            <div className="list-div-right">
              {Object.keys(item.info).map((item2, key2, arr) => {
                console.log(typeof item.info[item2])
                if (
                  item.info[item2] != null &&
                  typeof item.info[item2] === 'object'
                ) {
                  return (
                    <div className="left" key={key2}>
                      {' '}
                      <span>{item2}</span>:
                      {item2 === 'Indication' &&
                        item.info[item2].slice(0, 5).map((item3, index3) => {
                          return (
                            <span
                              type="primary"
                              style={{ fontWeight: 300, color: 'black' }}
                              key={index3}
                              onClick={() => this.getPdid(item3)}>
                              {item3}
                            </span>
                          )
                        })}
                      {item2 === 'Target' &&
                        item.info[item2].slice(0, 5).map((item3, index3) => {
                          return (
                            <Button
                              className={item.TargetState ? '' : 'isShowDiv'}
                              type="primary"
                              style={{ marginBottom: '5px', marginLeft: '5px' }}
                              key={index3}
                              onClick={() => this.getPdid(item3.dataid)}>
                              {item3.name}
                            </Button>
                          )
                        })}
                      <Button
                        className={
                          item.info[item2].length > 5 && item.TargetState
                            ? ''
                            : 'isShowDiv'
                        }
                        style={{ marginBottom: '5px', marginLeft: '5px' }}
                        onClick={() => this.TargetButton(item, index)}>
                        查看更多Target
                      </Button>
                      {item2 === 'Target' &&
                        item.info[item2].map((item3, index3) => {
                          return (
                            <Button
                              type="primary"
                              className={!item.TargetState ? '' : 'isShowDiv'}
                              style={{ marginBottom: '5px', marginLeft: '5px' }}
                              key={index3}
                              onClick={() => this.getPdid(item3.dataid)}>
                              {item3.name}
                            </Button>
                          )
                        })}
                      <Button
                        className={!item.TargetState ? '' : 'isShowDiv'}
                        style={{ marginBottom: '5px', marginLeft: '5px' }}
                        onClick={() => this.TargetButton2(item, index)}>
                        收起
                      </Button>
                      <div />
                    </div>
                  )
                } else {
                  return (
                    <div className="left" key={key2}>
                      {' '}
                      <span>{item2}</span>:{item.info[item2]}
                    </div>
                  )
                }
              })}

              {/* <p><font>DRUG_NAME：</font>{item.DRUG_NAME}</p>
                    <p><font>SMILES：</font>{item.smile}</p>
                    <p><font>Drug_Type：</font>{item.Drug_Type}</p>
                    <p><font>DrugBankID：</font>{item.DrugBankID}</p>
                    <p><font>ChemblID：</font>{item.ChemblID}</p> */}
            </div>
            <div className="btn-list">
              {item.right_info &&
                Object.entries(item.right_info).map((item2, index2) => {
                  if (typeof item2[1] === 'string') {
                    return (
                      // <div>
                      //  <span>{item2[0]}:</span>
                      //   {item2[1]}
                      // </div>
                      <div className="right-div" key={index2}>
                        {' '}
                        <span>{item2[0]}</span>:{item2[1]}
                      </div>
                    )
                  }
                })}
            </div>

            <div />
          </div>
        </Card>
      )
    })
    return (
      <div className="search-div">
        <Spin tip="Loading..." size="large" spinning={this.state.loading}>
          <Tabs type="card">
            <TabPane tab={smilesData.name} key={smilesData.name}>
              <div className="search-content">
                Search Content:{smilesData.drugs_data}
              </div>
              <div className="search-content">Search Total:{total_num}条</div>
              {/* <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeGroup}>
            <div className='CheckboxList'>
            <Checkbox value="pdb">pdb</Checkbox>
            <Checkbox value="Drug">Drug</Checkbox>
            <Button type="primary">Search</Button>
            </div>
          </Checkbox.Group> */}
              {listItems}
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange}
                onChange={this.onChange}
                total={total_num}
              />
            </TabPane>
          </Tabs>
        </Spin>
      </div>
    )
  }
}
