import React from 'react'
import ReactTV, { withFocusable, withNavigation } from 'react-tv'

const Item = ({focused, setFocus, focusKey}) => {
  focused = (focused) ? 'focused' : 'unfocused'
  return (
    <div className={focused} onClick={() => setFocus()}>
      It's {focused} Item
    </div>
  )
}

const FocusableItem1 = withFocusable(Item, {focusKey: 'focusKey-1'})
const FocusableItem2 = withFocusable(Item, {focusKey: 'focusKey-2'})
const FocusableItem3 = withFocusable(Item, {focusKey: 'focusKey-3'})

function App(props) {
  return (
    <div>
      <h1>Current FocusKey: "{props.currentFocusKey}"</h1>
      <FocusableItem1/>
      <FocusableItem2/>
      <FocusableItem3/>
    </div>
  )
}

export default withNavigation(App)