import React, { Component } from 'react';
import { Card, Tooltip, Popover, 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;
const { TabPane } = Tabs;
const { Option } = Select;
const { Title } = Typography;

export default class TargetDetails 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: [],

    targetsDetail: {
      Structure: [],
      Sequence: [],
    },
    loading: true,
    getStructureList: {
      ligand_up_list: [],
      ligand_list: [],
      chain: [],
      References: [],
    },
    listData: {
      pdb_code: '',
      ligand: '',
      resolution: 0,
    },
    fileData: {
      filestring: '',
      type: 'pdb',
    },
  };
  componentDidMount() {
    this.getDetails();
  }
  getDetails() {
    // this.setState({loading:true})
    this.setState({ loading: true });
    request
      .post('/targets_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({ OLDMutationList: data.Mutation });

          this.setState({ loading: false });
          let StructureList = res.data.data.Structure;
          if (StructureList.length > 0) {
            this.getStructure(StructureList[0].pdb);
          }
        } 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) => {
    let listData = this.state.listData;
    listData.ligand = '';
    this.setState({
      listData: listData,
    });
    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,
    });
  };
  render() {
    const { visible, panelList, Structure, OLDMutationList, name, pdbId, targetsDetail, getStructureList } = this.state;
    const columnsDrug = [
      {
        title: 'Drug Structure',
        dataIndex: 'Drug Structure',
        key: 'Drug Structure',
        render: (DrugStructure) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={DrugStructure} />,
      },

      {
        title: 'Drug name',
        dataIndex: 'Drug name',
        key: 'Drug name',
        render: (item, record) => (
          <Button type='primary' onClick={() => this.getDrug(record.Drug_dataid)}>
            {item}
          </Button>
        ),
      },
      {
        title: 'Drug Type',
        dataIndex: 'Drug type',
        key: 'Drug type',
      },
      {
        title: 'Indication',
        dataIndex: 'Indication',
        key: 'Indication',
      },
      {
        title: 'Mechanism of Action',
        dataIndex: 'Mechanism of Action',
        key: 'Mechanism of Action',
      },
      {
        title: 'Status',
        dataIndex: 'Status',
        key: 'Status',
      },
      {
        title: 'Clinical Phase',
        dataIndex: 'Clinical Phase',
        key: 'Clinical Phase',
      },
      {
        title: 'Clinical Status',
        dataIndex: 'Clinical Status',
        key: 'Clinical Status',
      },
      {
        title: 'Year of Approval',
        dataIndex: 'Year of Approval',
        key: 'Year of Approval',
      },
      {
        title: 'References',
        dataIndex: 'References',
        key: 'References',
        render: (References) => (
          <span>
            {References.map((item) => {
              return (
                <Tag
                  color='blue'
                  key={item}
                  onClick={() => {
                    this.getReferences(item);
                  }}
                >
                  {item.toUpperCase()}
                </Tag>
              );
            })}
          </span>
        ),
      },
    ];
    const columnsBioassay = [
      {
        title: 'Structure',
        dataIndex: 'smile',
        key: 'smile',
        render: (smile) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smile} />,
      },
      {
        title: 'Compound name',
        dataIndex: 'Compound name',
        key: 'Compound name',
      },
      {
        title: 'Type',
        dataIndex: 'Type',
        key: 'Type',
      },
      {
        title: 'Action',
        dataIndex: 'Action',
        key: 'Action',
      },
      {
        title: 'Parameter',
        dataIndex: 'Parameter',
        key: 'Parameter',
      },
      {
        title: 'Value',
        dataIndex: 'Value',
        key: 'Value',
      },
      {
        title: 'References',
        dataIndex: 'References',
        key: 'References',
        render: (References) => (
          <span>
            {References.map((item) => {
              return (
                <Tag
                  color='blue'
                  key={item}
                  onClick={() => {
                    this.getReferences(item);
                  }}
                >
                  {item.toUpperCase()}
                </Tag>
              );
            })}
          </span>
        ),
      },
    ];
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };

    const columnsMutation = [
      {
        title: 'Generic number',
        dataIndex: 'Generic',
        key: 'Generic',
      },
      {
        title: 'Position',
        dataIndex: 'Position',
        key: 'Position',
      },
      {
        title: 'Segment',
        dataIndex: 'Segment',
        key: 'Segment',
      },
      {
        title: 'Mutation',
        dataIndex: 'Mutation',
        key: 'Mutation',
      },
      {
        title: 'Ligand',
        dataIndex: 'Ligand',
        key: 'Ligand',
        render: (Ligand) => (
          <Popover
            content={
              <div>
                <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={Ligand.smile} />
              </div>
            }
          >
            {Ligand.name != '' && <Button type='primary'>{Ligand.name}</Button>}
          </Popover>
        ),
      },
      {
        title: 'Activity type',
        dataIndex: 'Activity type',
        key: 'Activity type',
      },
      {
        title: 'Activity value',
        dataIndex: 'Activity value',
        key: 'Activity value',
      },
      {
        title: 'PercentChange(%)',
        dataIndex: 'Foldchange',
        key: 'Foldchange',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.Foldchange - b.Foldchange,
      },

      // {
      //   title: 'Year of approval',
      //   dataIndex: 'Year of approval',
      //   key: 'Year of approval',
      // },
      {
        title: 'Reference',
        dataIndex: 'Reference',
        render: (Reference) => (
          <span>
            {Reference.map((item) => {
              return (
                <Tag
                  color='blue'
                  key={item}
                  onClick={() => {
                    this.getReferences(item);
                  }}
                >
                  {item.toUpperCase()}
                </Tag>
              );
            })}
          </span>
        ),
      },
    ];
    const columnsChain = [
      {
        title: 'Chain_name',
        dataIndex: 'Chain_name',
        key: 'Chain_name',
      },
      {
        title: 'Chain_ID',
        dataIndex: 'Chain_ID',
        key: 'Chain_ID',
      },

      {
        title: 'code',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: 'code_type',
        dataIndex: 'code_type',
        key: 'code_type',
      },
      {
        title: 'res_start',
        dataIndex: 'res_start',
        key: 'res_start',
      },
      {
        title: 'res_end',
        dataIndex: 'res_end',
        key: 'res_end',
      },
    ];
    return (
      <div className='search-details-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>Gene name</div>
                        <div />
                        {targetsDetail['Gene name']}
                      </div>
                      <div className='list-one'>
                        <div>Species</div>
                        <div />
                        {targetsDetail.Species}
                      </div>
                      <div className='list-one'>
                        <div>Uniprot id</div>
                        <div />
                        {targetsDetail['Uniport id']}
                      </div>
                      <div className='list-one'>
                        <div>Class</div>
                        <div />
                        {targetsDetail.Class}
                      </div>
                      <div className='list-one'>
                        <div>Family</div>
                        <div />
                        {targetsDetail.Family}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
          {/* {PanelList} */}
          <Collapse defaultActiveKey={['1', '2', '3', '4', '5']} onChange={this.callback}>
            <Panel header='Sequence' key='1'>
              <div className='Sequence-div'>
                {targetsDetail.Sequence.map((item, index) => {
                  // console.log(item);
                  //   console.log(Object.entries(item));
                  return (
                    <div className='Sequenceone-div' key={index}>
                      {Object.entries(item)[0][0]}
                      <div className='zimu-div'>
                        {Object.entries(item)[0][1].map((item2, index2) => {
                          console.log(item2);
                          return (
                            <Tooltip placement='top' key={index2} title={item2.title}>
                              <div className={'res-color-' + item2.thum}>{item2.thum}</div>
                            </Tooltip>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            </Panel>
            <Panel header='Structure' key='2'>
              <Tabs defaultActiveKey='0' type='card' tabPosition='left' onChange={this.ChangeTabs}>
                {targetsDetail.Structure.map((item, index) => {
                  return (
                    <TabPane tab={item.pdb} key={item.pdb}>
                      <div className='TabPane-center'>
                        <div className='Molstar-div2'>
                          <Molstar pdbId={item.pdb} />
                        </div>
                        <div className='Structure-right'>
                          <Form layout='horizontal'>
                            <Form.Item label='详情' {...formItemLayout}>
                              <div>method: {getStructureList.method}</div>
                              <div>name: {getStructureList.name}</div>
                              <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
                              <div>resolution: {getStructureList.resolution}</div>
                            </Form.Item>
                            <Form.Item label='配体列表' {...formItemLayout}>
                              {getStructureList.ligand_up_list &&
                                getStructureList.ligand_up_list.map((item, index) => {
                                  return (
                                    <Popover
                                      content={
                                        <div>
                                          <div style={{ width: '100px', wordWrap: 'break-word', wordBreak: 'normal' }}>{item.comp_name}</div>

                                          <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
                                        </div>
                                      }
                                    >
                                      {
                                        <Button type='primary' style={{ marginRight: '5px' }}>
                                          {item.name}
                                        </Button>
                                      }
                                    </Popover>
                                  );
                                })}
                            </Form.Item>
                            <Form.Item label='配体选择' {...formItemLayout}>
                              <Select style={{ width: 250 }} value={this.state.listData.ligand} size='large' onChange={this.LigandChange}>
                                {getStructureList.ligand_list &&
                                  getStructureList.ligand_list.map((item, index) => {
                                    return (
                                      <Option key={index} value={item}>
                                        {item}
                                      </Option>
                                    );
                                  })}
                              </Select>
                            </Form.Item>
                            <Form.Item label='搜索半径' {...formItemLayout}>
                              <InputNumber
                                style={{ width: 250 }}
                                min={getStructureList.resolution}
                                max={10}
                                placeholder={'请输入大于resolutiond数字'}
                                step={0.1}
                                size='large'
                                onChange={this.getResolutionData}
                              />
                            </Form.Item>
                            <Form.Item label='References ' {...formItemLayout}>
                              {getStructureList.References &&
                                getStructureList.References.map((item, index) => {
                                  return (
                                    <Button
                                      type='primary'
                                      onClick={() => {
                                        this.getReferences(item);
                                      }}
                                      key={index}
                                      style={{ marginRight: '5px' }}
                                    >
                                      {item}
                                    </Button>
                                  );
                                })}
                            </Form.Item>
                            <Form.Item label='Search' {...formItemLayout}>
                              <Button
                                type='primary'
                                style={{ marginLeft: 50, width: 150 }}
                                size='large'
                                loading={this.state.loading}
                                disabled={getStructureList.ligand_list.length === 0}
                                onClick={this.getList}
                              >
                                Search
                              </Button>
                            </Form.Item>
                          </Form>
                        </div>
                      </div>
                      <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
                    </TabPane>
                  );
                })}
              </Tabs>
            </Panel>
            <Panel header='Mutation' key='3'>
              <div className='Radio-div'>
                <Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
                  <Radio value={0}>Full data</Radio>
                  <Radio value={1}>Increase only</Radio>
                  <Radio value={2}>Decrease only</Radio>
                </Radio.Group>
              </div>

              <Table bordered rowKey='item' dataSource={OLDMutationList} pagination={false} columns={columnsMutation} />
            </Panel>
            <Panel header='Drug & Clinical information' key='4'>
              <Table bordered rowKey='item' dataSource={targetsDetail['Drugs information']} pagination={false} columns={columnsDrug} />
            </Panel>
            <Panel header='Bioassay' key='5'>
              <Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} />
            </Panel>
          </Collapse>
        </Spin>
      </div>
    );
  }
}
