import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {BrowserAddressBar, BrowserPageLoader} from 'components';
// import {getHTMLSourceCode} from 'utils/AppUtils';



export default class Browser extends React.Component {
  constructor(props){
    super(props);
    this.onSubmit=this.onSubmit.bind(this);
    this.state={
      url: ''
    }
  }
  onSubmit(searchbartext){
    this.setState({url: searchbartext});
  }
    render() {
      console.log("props is"+this.props);
    return (
    <div>
      <BrowserAddressBar onSubmit={this.onSubmit} props={this.props}/>
      <BrowserPageLoader url={this.state.url} props={this.props}/>
    </div>

    );
  }
}



// export default class Browser extends Component {

//   constructor(props) {
//     super(props);
//     this.handleSubmit = this.handleSubmit.bind(this);
//     this.getHTMLSourceCode = this.getHTMLSourceCode.bind(this);
//     this.processHTMLCode = this.processHTMLCode.bind(this);
//     this.state = {
//       urlValue : "http://www.google.co.in"
//     };
//   }

//   componentWillMount () {
//     console.log('query ', this.props.location.query);
//     let search = this.props.location.query;
//     let searchKeys = Object.keys(search)
//     if (searchKeys.length !== 0) {
//       let url = search.q;
//       url = atob(url);
//       this.getHTMLSourceCode(url, this.processHTMLCode);
//     }

//   }

//   processHTMLCode (code) {
//     // console.log('code', code);
//     code = new Element(code);
//     let base_url;
//     if ( Object.keys(this.props.location.query).length > 0 ) {
//       let url = this.props.location.query.q;
//       let anchor = document.createElement('a')
//       anchor.href = url;
//       base_url += anchor.protocol;
//       base_url += '//'
//       base_url += anchor.host;
//     }

//     let anchorTags = document.getElementsByTagName('a');

//     for (let i=0;i<anchorTags.length;i++) {
//       let link = anchorTags[i].getAttribute('href') || '';
//       console.log('lfaf'+link+'!!');
//       if ( link.startsWith('/') ) {
//         let relativeURL = link;
//         let absoluteURL = base_url + relativeURL;
//         let encodedAbsoluteURL = btoa(absoluteURL);
//         let finalURL = SITE_BASE_URL+'?q='+encodedAbsoluteURL;
//         anchorTags[i].href = finalURL;
//       }
//     }

//     let imageTags = document.getElementsByTagName('img');
//     for (let i=0;i<imageTags.length;i++) {
//       let src = imageTags[i].getAttribute('src') || '';
//       if (src.startsWith('/')) {
//         let relativeURL = src;
//         let absoluteURL = base_url + relativeURL;
//         let encodedAbsoluteURL = btoa(absoluteURL);
//         let finalURL = SITE_BASE_URL+'?q='+encodedAbsoluteURL;
//         imageTags[i].src = finalURL;
//       }
//     }

//     let formTags = document.getElementsByTagName('form');
//     for (let i=0;i<formTags.length;i++) {
//       let action = formTags[i].getAttribute('action') || '' ;
//       if (action.startsWith('/')) {
//         let relativeURL = action;
//         let absoluteURL = base_url+relativeURL;
//         let encodedAbsoluteURL  = btoa(absoluteURL);
//         let finalURL = SITE_BASE_URL + '?q='+ encodedAbsoluteURL;
//         formTags[i].action = finalURL;
//       }
//     }

//     // code = code.replace(/href=\"\//g,'href=\"https://www.google.com/');
//     // code = code.replace(/src=\"\//g,'src=\"https://www.google.com/');
//     // code = code.replace(/action=\"\//g,'action=\"https://www.google.com/');
//     // let res = code.match(/href=\"\//g);
//     // console.log('res',res, code.match(/action=\"\//g));
//     $('#result').html(code);
//     // console.log('code', code);
//   }

//   getHTMLSourceCode (givenURL, callback) {
//     $.get( givenURL, function( data ) {
//       callback(data.responseText);
//     });
//   }

//   handleSubmit(e){
//     e.preventDefault();
//     var url = ReactDOM.findDOMNode(this.refs.url).value;
//     url = url.replace("watch?v=", "v/");
//     this.setState({
//       urlValue : "http://"+url
//     });
//     this.getHTMLSourceCode("http://google.com",this.processHTMLCode);
//   }

//   render() {
//     console.log('my props', this.props);
//     return (
//      <div className="container">
//       <div className="Browser row">
//        <div className="row">
//         <div className="col-xs-6">
//           <center>
//             <label  className="boxheading">Search for a Webpage</label><br/>
//             <div className="row search-bar">
//               <form className="form-search">
//                 <input type="text" ref="url" className="input-medium search-query" placeholder="Search" />
//                 <button className="btn" type="submit" onClick={this.handleSubmit}>Go</button>
//               </form>
//               <iframe src={this.state.urlValue} className="browser-search" ></iframe>
//             </div>
//             <div id="result"></div>
//           </center>
//         </div>
//        </div>
//       </div>
//      </div>
//     );
//   }
// }
