import { Component } from 'react';
import Router from 'next/router'; 
import getUrl from '../util/getUrl'; 
import { getKey } from '../util/keys'; 
import { doLogout } from '../redux/actions/userAct'; 

/* - keyboard shortcuts
  g then h -> navigate home
  g then n -> navigate to new doc
  g then s -> navigate to settings
  g then l -> logout
  e (when on doc page) -> edit doc
  / (when on home page) -> focus search
  ctrl/cmd + enter -> submit new doc (handled in CodeMirror component)
*/
const keyToUrl = {
  72: '/',
  78: '/new',
  83: '/settings'
}; 
const keyToEl = {
  69: { sel: '#edit', func: 'click' }, 
  191: { sel: '.search', func: 'focus' }
}; 

class KeyShortcuts extends Component {
  handleDown = e => {
    const tag = e.target.tagName; 
    if(tag === 'INPUT' || tag === 'TEXTAREA') return;
    const key = getKey(e);
    if(this.prevKey === 71) { // prev key was g
      switch (key) {
      case 72: 
      case 78: 
      case 83: {
        const url = keyToUrl[key];
        Router.push(url, getUrl(url)); 
        break; 
      }
      case 76: {
        setTimeout(doLogout, 1);  
        break; 
      }
      default: break; 
      }
    }
    switch (key) {
    case 69: 
    case 191: {
      const { sel, func } = keyToEl[key]; 
      const el = document.querySelector(sel);
      if(el) setTimeout(() => el[func](), 1);
      break; 
    }
    default: break;   
    }
    this.prevKey = key; 
  };
  componentDidMount() {
    window.addEventListener('keydown', this.handleDown); 
  }
  componentWillUnmount() {
    window.removeEventListener('keydown', this.handleDown); 
  }
  render = () => null
}

export default KeyShortcuts;