import React, { Component } from 'react'
import Molstar from "molstar-react";
import {Tabs,} from 'antd';
import qs from 'qs'
import './index.css'
const { TabPane } = Tabs;

export default class MolstarView extends Component {
   
    state={
        PdbId:qs.parse(this.props.location.search.slice(1)).PdbId,
        tabs:['Ligand','Water','Polymer','Ion','CDR']
    
    }
  render() {
      const{tabs,PdbId}=this.state
      console.log();
    return (
      <div>  
          
          <Tabs defaultActiveKey="0" type="card" tabPosition='left'>
                         
      {
       tabs.map((item,index)=>{
         return(
           <TabPane tab={item} key={index}>
             <div className='Molstar-div2'>
             <Molstar pdbId={PdbId} />
             </div>
         </TabPane>
         )
      
       })
          
      }

 </Tabs>
      
      </div>
    )
  }
}
