const React = require('react')
const {Component} = React
import { Checkbox } from 'semantic-ui-react';
const ipc = require('electron').ipcRenderer
const PubSub = require('./pubsub')

let options = {case:false,or:false,reg:false}

export default class BrowserPageSearch extends Component {
  constructor(props) {
    super(props)
    this.state = {...options}
  }

  componentDidMount(){
    this.event = (e, type, ...args) =>{
      if(type == 'text-keydown'){
        const [value, shiftKey] = args
        this.setState({value})
        this.props.onPageSearch(this.state.value,!shiftKey,this.state.case,this.state.or,this.state.reg)
      }
      else if(type == 'text-input'){
        const [value] = args
        this.setState({value})
        this.props.onPageSearch(this.state.value,void 0,this.state.case,this.state.or,this.state.reg)
      }
      else if(type == 'back'){
        this.props.onPageSearch(this.state.value,false)
      }
      else if(type == 'forward'){
        this.props.onPageSearch(this.state.value,void 0,this.state.case,this.state.or,this.state.reg)
      }
      else if(type == 'check'){
        const [op, checked] = args
        if(op == 'all'){
          if(!document.querySelector('.find-panel')){
            ipc.emit('menu-or-key-events', null, 'findAll', this.props.tab.wvId)
          }
          PubSub.publish('find-all-search',this.refs.input.value)
          this.props.onClose()
          this.setState({value})
        }
        else{
          this.changeCheck({}, op, {checked})
        }
      }
      else if(type == 'close'){
        this.props.onClose(e,true)
      }
    }
    ipc.on(`page-search-event-${this.props.k}-${this.props.tab.key}`, this.event)
    console.log(`page-search-event-${this.props.k}-${this.props.tab.key}`)
  }

  componentWillUnmount(){
    ipc.removeListener(`page-search-event-${this.props.k}-${this.props.tab.key}`, this.event)
  }

  updateComponent(){
    const r = this.props.isActive && this.props.isSelected ? ReactDOM.findDOMNode(this.props.parent).getBoundingClientRect() : {left:0, top:-1, width:0, height:0}
    console.log('set-overlap-component', 'page-search', this.props.k, this.props.tab.key, r.left + r.width - 446.72 -14, r.top, 446.72, 30, this.props.progress, this.state)
    ipc.send('set-overlap-component', 'page-search', this.props.k, this.props.tab.key, r.left + r.width - 446.72 -14, r.top, 446.72, 30, this.props.progress, this.state )
    if(this.state.focus) this.state.focus = false
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.isActive && this.props.isActive){
      // this.refs.input.focus()
      // this.state = {...options}
      if(this.or){
        this.state.or = true
        this.or = void 0
      }
      if(this.state.value){
        this.props.onPageSearch(this.state.value,void 0,this.state.case,this.state.or,this.state.reg)
      }
      this.updateComponent()
    }
    else if(prevProps.isActive && !this.props.isActive){
      this.props.onClose()
      this.state.value = ""
      this.updateComponent()
    }
    else if(prevProps.progress != this.props.progress){
      this.updateComponent()
    }
    else if(this.state.focus){
      this.updateComponent()
    }
    else if(prevProps.isSelected != this.props.isSelected){
      this.updateComponent()
    }
  }

  // onKeyDown(e) {
  //   if (e.keyCode == 13) {
  //     e.preventDefault()
  //     this.props.onPageSearch(e.target.value,!e.shiftKey,this.state.case,this.state.or,this.state.reg)
  //   }
  // }
  // onChange(e) {
  //   e.preventDefault()
  //   this.props.onPageSearch(this.refs.input.value,void 0,this.state.case,this.state.or,this.state.reg)
  // }

  changeCheck(e,name,data){
    const val = data.checked
    this.state[name] = val
    for(let name of ['case','or','reg']){
      options[name] = this.state[name]
    }
    this.props.onPageSearch(this.state.value,void 0,this.state.case,this.state.or,this.state.reg)
    this.setState({})
  }

  // onClickPrev(e){
  //   e.preventDefault()
  //   this.props.onPageSearch(this.state.value,false)
  // }
  render() {
    return null

    // return <div className={(this.props.isActive ? 'visible' : 'hidden')+" browser-page-search"}>
    //   <input className="search-text" ref="input" type="text" placeholder="Search..." onKeyDown={::this.onKeyDown} onChange={::this.onChange}/>
    //   <a className="search-button" href="javascript:void(0)"><i className="search-next fa fa-angle-up" style={{fontSize: "1.5em",lineHeight: "1.2",height:"30px"}} onClick={::this.onClickPrev}></i></a>
    //   <a className="search-button" href="javascript:void(0)"><i className="search-prev fa fa-angle-down" style={{fontSize: "1.5em",lineHeight: "1.3",height:"30px"}} onClick={::this.onChange}></i></a>
    //   <span className="search-num">{this.props.progress}</span>
    //   <Checkbox style={{paddingLeft: 4, borderLeft: '1px solid #aaa'}} label="Case" checked={this.state.case} onChange={(e,data)=>this.changeCheck(e,'case',data)}/>
    //   <Checkbox label="OR" checked={this.state.or} onChange={(e,data)=>this.changeCheck(e,'or',data)}/>
    //   <Checkbox label="Reg" checked={this.state.reg} onChange={(e,data)=>this.changeCheck(e,'reg',data)}/>
    //   <Checkbox label="All" checked={false} onChange={(e,data)=>{
    //     if(!document.querySelector('.find-panel')){
    //       ipc.emit('menu-or-key-events', null, 'findAll', this.props.tab.wvId)
    //     }
    //     PubSub.publish('find-all-search',this.refs.input.value)
    //     this.props.onClose()
    //     this.refs.input.value = ""
    //   }}/>
    //   <a className="search-button" href="javascript:void(0)"><div className="search-close" style={{lineHeight: "1.5",height:"30px"}} onClick={e=>this.props.onClose(e,true)}>☓</div></a>
    // </div>
  }
}