import React, { Component } from "react";
import { Tabs, Button, Radio, Upload, Input, Select, Form, Icon } from "antd";
import { Jsme } from "jsme-react";
import "./index.css";
const { Option } = Select;
const { TextArea } = Input;
export default class StructureSearch extends Component {
  state = {
    list: [
      {
        name: "docking",
        state: true,
      },
      {
        name: "retrosynthesis",
        state: false,
      },
    ],
    targetsDetail: {
      name: "",
    },
  };
  goList = () => {
    let data = this.state.searchData;
    this.props.history.push({
      pathname: "/home/SearchList",
      // search: qs.stringify(data),
    });
  };
  callback = (e) => {
    console.log(e);
    // let searchData = this.state.searchData;
    // searchData.name = e;
    // this.setState(() => ({ searchData: searchData }));
    // console.log(this.state.searchData);
  };
  getListOne = (e) => {
    console.log(1111);
    let newList = this.state.list;
    console.log(e);
    newList.forEach((item, index) => {
      item.state = false;
      if (e === index) {
        item.state = true;
      }
    });
    console.log(newList);
    this.setState({
      list: newList,
    });
  };
  onChange = () => {};
  logSmiles = (e) => {
    console.log(e);
    // let searchData = this.state.searchData
    // searchData.drugs_data = e
    // this.setState(() => ({ searchData: searchData }))
    // this.setState(()=>({data:e }))
  };

  render() {
    const { list, targetsDetail } = this.state;
    const formItemLayout2 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px",
      marginBottom: "20px",
      width:'700px'
    };

    return (
      <div className="Docking-div">
        <div>
          <div className="left-div">
            {list.map((item, index) => {
              return (
                <Button
                  type={item.state ? "primary" : ""}
                  size="large"
                  shape="round"
                  onClick={() => this.getListOne(index)}
                  key={index}
                >
                  {item.name}
                </Button>
              );
            })}
          </div>
          <div className="right-div">
            {list[0].state && (
              <div className="generalsearch-div">
                <div>Step1. Receptor preparation</div>
                <Radio.Group onChange={this.onChange}>
                  <Radio style={radioStyle} value={1}>
                    Upload receptor file from your computer:{" "}
                    <Button>
                      <Icon type="upload" /> 选择文件
                    </Button>
                  </Radio>
                  <Radio style={radioStyle} value={2}>
                    Specify PDB ID of receptor:
                    <Input />
                  </Radio>
                </Radio.Group>
                <div>Step2. Ligand preparation</div>
                <Radio.Group onChange={this.onChange}>
                  <Radio style={radioStyle} value={1}>
                    Upload ligand file from your computer:{" "}
                    <Button>
                      <Icon type="upload" /> 选择文件
                    </Button>
                  </Radio>
                  <Radio style={radioStyle} value={2}>
                    Ligand SMILES:
                    <Input />
                  </Radio>
                </Radio.Group>
                <div>enter SMILES or draw the ligand structure below:</div>
              </div>
            )}

            {list[1].state && (
              <div className="generalsearch-div">
                <div>Upload SMILES</div>
                <Radio.Group onChange={this.onChange}>
                  <Radio style={radioStyle} value={2}>
                    Ligand SMILES:
                    <Input />
                  </Radio>
                </Radio.Group>
                <div>nter SMILES or draw the molecule below:</div>
              </div>
            )}
          </div>
        </div>
        <div className="Jsme-div">
        <Jsme
          height="500px"
          width="700px"
          options="oldlook,star"
          onChange={this.logSmiles}
        />

        </div>
      
        <div className="bottom-butn">
          <Button
            onClick={this.goList}
            type="primary"
            size="large"
            shape="round"
          >
            Run
          </Button>
        </div>
      </div>
    );
  }
}
