import React, { Component } from 'react';
import { Card, Tooltip, Popover, message, Radio, Button, Tabs, Spin, Table, Tag, Collapse, Modal, Divider } 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;

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,
  };
  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 });
        } 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() {}
  render() {
    const { visible, panelList, Structure, OLDMutationList, name, pdbId, targetsDetail } = 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>
        ),
      },
      //   render: Reference => (
      //     <span>
      //       {Reference.map(item => {
      //         return (
      //           <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
      //             {item.toUpperCase()}
      //           </Tag>
      //         );
      //       })}
      //     </span>
      //   ),
      // {
      //   title: 'PDB',
      //   dataIndex: 'PDB',
      //   render: PDB => (
      //     <span>
      //       {PDB.map(item => {
      //         return (
      //           <Tag color="blue" key={item} onClick={()=>{this.getTag(item)}} >
      //             {item.toUpperCase()}
      //           </Tag>
      //         );
      //       })}
      //     </span>
      //   ),
      // },
      // {
      //   title: 'sequence',
      //   dataIndex: 'sequence',
      //   key: 'sequence',
      //   render: sequence => (
      //     <span>
      //       {
      //         <Tooltip placement="topLeft" title={sequence}>
      //         <Button>Sequence</Button>
      //       </Tooltip>
      //       }
      //     </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 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: 'Foldchange',
        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>
        ),
      },
    ];
    return (
      <div className='search-details-div'>
        <Modal footer={null} closable={false} width={850} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
          <div className='Molstar-div'>
            <Molstar pdbId={pdbId} />
          </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'>
                      {Object.entries(item)[0][0]}
                      <div className='zimu-div'>
                        {Object.entries(item)[0][1].map((item2, index) => {
                          console.log(item2);
                          return (
                            <Tooltip placement='top' 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'>
                {targetsDetail.Structure.map((item, index) => {
                  return (
                    <TabPane tab={item.pdb} key={index}>
                      <div className='Molstar-div2'>
                        <Molstar pdbId={item.pdb} />
                      </div>
                    </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>
    );
  }
}
