import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Icon,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography, Dropdown} 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;

let id = 0;
@Form.create()
export default class LigandDetails 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:[],
        CalculatedPropeties:{},
        targetsDetail:{
            Structure:[],
            Sequence:[],
            Mutation:[]
        },
        loading:true,
        getStructureList:{
          ligand_up_list:[],
          ligand_list:[],
          chain:[],
          References:[]
        },
        listData:{
          pdb_code: '',
          ligand: '',
          resolution: 0
        },
        fileData:{
          filestring:'',
          type:'pdb'
        },
        SequenceAlignment:{
            reference:'',
            aligns:''

        },
        SequenceAlignmentList:[]
     
    };
    componentDidMount(){
      this.getDetails()
      this.add()
    }
    getDetails(){
      // this.setState({loading:true})
      this.setState({loading:true})
      request.post('/mutation_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({CalculatedPropeties:data.Calcilated_propeties})
          
          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}`)
  }
  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)=>{
      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
        })
    }
    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
         })
            
        }
    
      }
      sequenceAlign=()=>{

        request.post('/sequence_align', qs.stringify(this.state.SequenceAlignment) )
        .then(res => {
          
         console.log(res);
          this.setState({loading:false})
          if (res.data.code===200) {
            this.setState({ SequenceAlignmentList:res.data.data})
           
          }else{
            message.error(res.data.msg);
          }
         
        })
        .catch(err => {
          console.error(err); 
        })

      }
      remove = k => {
        const { form } = this.props;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        // We need at least one passenger
        if (keys.length === 1) {
          return;
        }
    
        // can use data-binding to set
        form.setFieldsValue({
          keys: keys.filter(key => key !== k),
        });
      };
    
      add = () => {
        const { form } = this.props;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(id++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
          keys: nextKeys,
        });
      };
    
      handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
    
            const { keys, names } = values;
            // console.log('Received values of form: ', values);
            // console.log('Merged values:', keys.map(key => names[key]));
            // let names=keys.map(key => names[key])
            console.log(names);
          
            for (let index = 0; index < names.length; index++) {
              var element = names[index];
              if (element==undefined) {
                names[index]=''
              }
            }
            let newArr=names.filter(i=>i && i.trim())
            console.log(newArr);
         
            let SequenceAlignment = this.state.SequenceAlignment;
            SequenceAlignment.aligns=newArr.toString()
            SequenceAlignment.reference= this.state.targetsDetail.name
            this.setState(()=>({SequenceAlignment:SequenceAlignment }))
    
            this.sequenceAlign()
            
        
      
        });
      };
      getSequence=(e)=>{
        const { value } = e.target;
        let SequenceAlignment = this.state.SequenceAlignment;
        SequenceAlignment.reference=value
        this.setState(()=>({SequenceAlignment:SequenceAlignment }))
        
      }
  render() {

    const {visible,panelList,Structure,OLDMutationList, name,pdbId,targetsDetail,SequenceAlignmentList}=this.state
    const { getFieldDecorator, getFieldValue } = this.props.form;
    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 columns2 = [
        {
          title: 'name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'sequence',
          dataIndex: 'sequence',
          key: 'sequence',
          width:600,
        },
        {
          title: 'identity',
          dataIndex: 'identity',
          key: 'identity',
        },
        {
            title: 'similarity',
            dataIndex: 'similarity',
            key: 'similarity',
          },
      ];
      
     const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };
  const formItemLayout3 ={
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
  }

  getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
  const formItems = keys.map((k, index) => (
    <Form.Item
      {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
      label={index === 0 ? 'AlignSequence: ' : ''}
      required={false}
      key={k}
    >
      {getFieldDecorator(`names[${k}]`)(<Input placeholder="Please input uniprot name" style={{ width: '60%', marginRight: 8 }} />)}
      {keys.length > 1 ? (
        <Icon
          className="dynamic-delete-button"
          type="minus-circle-o"
          onClick={() => this.remove(k)}
        />
      ) : null}
    </Form.Item>
  ));
  
    return (
      <div className='MutationDetails-div'>
            <Modal
                footer={null} closable={false}
                width={1000}
                visible={visible}
                wrapClassName="vertical-center-modal"
                onCancel={() => this.setState({visible: false})}>
               <div className='form-div'>
                    <Form onSubmit={this.handleSubmit}>
                    <Form.Item label="Ref. Sequence:" {...formItemLayout}   >
                        <Input placeholder="" style={{ width: '60%', marginRight: 8 }} disabled value={targetsDetail.name} />
                        </Form.Item>

                        {formItems}
                        <Form.Item {...formItemLayoutWithOutLabel}>
                        <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
                            <Icon type="plus" /> Add field
                        </Button>
                        </Form.Item>
                        <Form.Item {...formItemLayoutWithOutLabel}>
                        <Button type="primary" htmlType="submit">
                        Align
                        </Button>
                        </Form.Item>
                    </Form>
               </div>
               <div className='SequenceAlignmentList-div'>
               {
                   SequenceAlignmentList.length>0&& (<Table
                   bordered
                   rowKey='item'
                   dataSource={SequenceAlignmentList}
                   pagination={false}
                   columns={columns2}
                   scroll={{ x: 1200}}
               />)
               }
               </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 className='left-title'>Gene name</div>
                            <div >
                            </div>
                            {targetsDetail['Gene name']}
                            </div>
                            <div className='list-one'>
                            <div className='left-title'>Species</div>
                            <div >
                            </div>
                            {targetsDetail.Species}
                            </div>
                            <div className='list-one'>
                            <div className='left-title'>Uniport id</div>
                            <div >
                            </div>
                            {targetsDetail['Uniport id']}
                            </div>
                            <div className='list-one'>
                            <div className='left-title'>Class</div>
                            <div >
                            </div>
                            {targetsDetail.Class}
                            </div>
                            <div className='list-one'>
                            <div className='left-title'>Family</div>
                            <div >
                            </div>
                            {targetsDetail.Family}
                            </div>
                           
                            </div>
                        
                        </div>
                            </div>
                            {/* <div className='Jsme-div'>
                            <Jsme height="300px" width="300px" options="depict,useopenchemlib" smiles={targetsDetail.smile} />
                            </div> */}
                          </div>
                        
                    </div>
              
                </Card>
                {/* {PanelList} */}
                <Collapse defaultActiveKey={['1','2','3']} onChange={this.callback}>
                <Panel header="Sequence" key="1">
                {/* <Button type="primary" onClick={() => this.setState({visible: true})}>筛选配体结合位点</Button> */}
                  <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="Mutation" key="2">
                        <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="Structure" key="3">
                  <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>
                               
                            </TabPane>
                            
                            )
                         
                          })
                             
                         }
                   
                    </Tabs>
                  </Panel>
                 
                  
              </Collapse>
          </Spin>

      </div>
    )
  }
}
