just-paja/radio-drama-queen

import PropTypes from 'prop-types'
import KeyboardEventHandler from 'react-keyboard-event-handler'
import React from 'react'

import { boardRoutines, boardStore, getBoardCategoryUuids } from '../../soundBoards'
import { categoryRoutines } from '../../soundCategories'
import { connect } from 'react-redux'
import { getFocusedCategory, getFocusedSound } from '../selectors'
import { isAnyDialogOpen } from '../../dialogs'
import { ListShortcuts, noArgs } from '../../components'
import { workspaceRoutines } from '../actions'

class BoardShortcutsComponent extends React.PureComponent {
  constructor (props) {
    super(props)
    this.createCategory = this.createCategory.bind(this)
    this.nextBoard = this.nextBoard.bind(this)
    this.nextCategory = this.nextCategory.bind(this)
    this.prevBoard = this.prevBoard.bind(this)
    this.prevCategory = this.prevCategory.bind(this)
    this.removeBoard = this.removeBoard.bind(this)
  }

  get boardIndex () {
    const { board, boards } = this.props
    return boards.findIndex(b => b.uuid === board)
  }

  get categoryIndex () {
    const { focusedCategory, categories } = this.props
    return categories.indexOf(focusedCategory)
  }

  createCategory () {
    if (this.props.board) {
      this.props.onCategoryCreate(this.props.board)
    }
  }

  focusBoardIndex (boardIndex) {
    const board = this.props.boards[boardIndex]
    if (board) {
      this.props.onBoardSelect(board.uuid)
    }
  }

  focusCategoryIndex (boardIndex) {
    const categoryUuid = this.props.categories[boardIndex]
    if (categoryUuid) {
      this.props.onCategoryFocus(categoryUuid)
    }
  }

  nextBoard () {
    this.focusBoardIndex(this.boardIndex + 1)
  }

  nextCategory () {
    this.focusCategoryIndex(this.categoryIndex + 1)
  }

  prevBoard () {
    this.focusBoardIndex(this.boardIndex - 1)
  }

  prevCategory () {
    this.focusCategoryIndex(this.categoryIndex - 1)
  }

  removeBoard () {
    const { board, categories, focusedCategory, onBoardRemove } = this.props
    const hasFocusedCategory = categories.length && (!focusedCategory || categories.indexOf(focusedCategory) !== -1)
    if (!hasFocusedCategory && board && categories.length === 0) {
      onBoardRemove(board)
    }
  }

  render () {
    const { categories, focusedCategory, onBoardCreate, openDialogs } = this.props
    if (openDialogs) {
      return null
    }
    return (
      <React.Fragment>
        <KeyboardEventHandler
          handleFocusableElements
          handleKeys={['b']}
          onKeyEvent={onBoardCreate}
        />
        <KeyboardEventHandler
          handleFocusableElements
          handleKeys={['c']}
          onKeyEvent={this.createCategory}
        />
        <ListShortcuts
          disabled={openDialogs}
          horizontal
          focused={focusedCategory}
          items={categories}
          onFocus={this.props.onCategoryFocus}
        />
        <KeyboardEventHandler
          handleFocusableElements
          handleKeys={['pagedown']}
          onKeyEvent={this.nextBoard}
        />
        <KeyboardEventHandler
          handleFocusableElements
          handleKeys={['pageup']}
          onKeyEvent={this.prevBoard}
        />
        <KeyboardEventHandler
          handleFocusableElements
          handleKeys={['delete']}
          onKeyEvent={this.removeBoard}
        />
      </React.Fragment>
    )
  }
}

BoardShortcutsComponent.displayName = 'BoardShortcuts'
BoardShortcutsComponent.propTypes = {
  board: PropTypes.string,
  onBoardCreate: PropTypes.func.isRequired,
  onBoardRemove: PropTypes.func.isRequired,
  openDialogs: PropTypes.bool
}

BoardShortcutsComponent.defaultProps = {
  board: null,
  openDialogs: false
}

const mapStateToProps = (state, ownProps) => ({
  boards: boardStore.getAll(state),
  categories: getBoardCategoryUuids(state, ownProps.board),
  focusedCategory: getFocusedCategory(state),
  focusedSound: getFocusedSound(state),
  noBoards: boardStore.isEmpty(state),
  openDialogs: isAnyDialogOpen(state)
})

const mapDispatchToProps = {
  onBoardCreate: noArgs(boardRoutines.create),
  onBoardRemove: boardRoutines.remove,
  onBoardSelect: workspaceRoutines.selectBoard,
  onCategoryCreate: boardRoutines.createCategory,
  onCategoryFocus: categoryRoutines.focus
}

export const BoardShortcuts = connect(
  mapStateToProps,
  mapDispatchToProps
)(BoardShortcutsComponent)