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) {
          console.log(res.data.data);
          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>
    );
  }
}
