import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import { withShortcut, ShortcutProvider, ShortcutConsumer } from 'react-keybind'

/**
 * Sample component
 *
 * We define shortcuts when the component mounts. This is useful because we can globally keep track
 * of what keyboard shortcuts _currently_ exist for our application.
 *
 * This sample component utilizes CTRL+N and CTRL+S to "create" and "save" files. It shows the usage
 * of both a regular and async method being used as a shortcut for the app.
 */
class MyComponent extends PureComponent {
  state = {
    isSaved: false,
    totalFiles: 0,
  }

  componentDidMount () {
    const { shortcut } = this.props

    shortcut.registerShortcut(this.save, ['ctrl+s', 'cmd+s'], 'Save', 'Save a file')
    shortcut.registerShortcut(this.create, ['ctrl+n', 'cmd+n'], 'New', 'Create a new file')
  }

  componentWillUnmount () {
    const { shortcut } = this.props
    
    shortcut.unregisterShortcut(['ctrl+n', 'cmd+n'])
    shortcut.unregisterShortcut(['ctrl+s', 'cmd+s'])
  }

  create = (e) => {
    e.preventDefault()
    console.log('Creating file ...')

    const { totalFiles } = this.state
    this.setState({
      isSaved: false,
      totalFiles: totalFiles + 1,
    })
  }

  save = async (e) => {
    e.preventDefault()
    console.log('Saving file ...')

    await new Promise(resolve => setTimeout(resolve, 1000))
    this.setState({ isSaved: true })
  }

  render() {
    const { isSaved, totalFiles } = this.state

    return (
      <div>
        <div>Save the file with <strong>Ctrl + S</strong></div>
        <div>File status: {isSaved ? 'Saved' : 'Not Saved'}</div>
        <div>Total Files: {totalFiles}</div>
      </div>
    )
  }
}

// Wrap all components that need shortcut capabilities with the "withShortcut" HOC
const MyShortcutComponent = withShortcut(MyComponent)

/**
 * Main Application
 *
 * Our main application gets wrapped with <ShortcutProvider /> to provide shortcut functionality
 * to the entire application. We can then use the <ShortcutConsumer /> in any child component to
 * access all of the active keybindings our application has.
 */
const MyApp = () => (
  <ShortcutProvider>
    <MyShortcutComponent />

    <ShortcutConsumer>
      {({ keys: allKeys }) => (
        <div>
          <h1>Available Keys</h1>
          <ul>
            {allKeys.map(binding => (
              <li key={binding.id}>{binding.title} - {binding.description}</li>
            ))}
          </ul>
        </div>
      )}
    </ShortcutConsumer>
  </ShortcutProvider>
)

// That's it, render your application however you normally do
ReactDOM.render(MyApp, '#app')

import React, { useCallback, useEffect, useState } from 'react'

const MyComponent = (props) => {
  const [state, setState] = useState({
    isSaved: false,
    totalFiles: 0,
  })

  const create = useCallback((e) => {
    e.preventDefault()
    console.log('Creating file ...')

    setState(({totalFiles}) => ({
      isSaved: false,
      totalFiles: totalFiles + 1,
    }))
  }, [state])
 
  const save = useCallback(async (e) => {
    e.preventDefault()
    console.log('Saving file ...')
 
    await new Promise(resolve => setTimeout(resolve, 1000))
    setState(({totalFiles}) => ({
      isSaved: true,
      totalFiles: totalFiles,
    }))
  }, [state])

  useEffect(() => {
    const { shortcut } = props
 
    shortcut.registerShortcut(save, ['ctrl+s', 'cmd+s'], 'Save', 'Save a file')
    shortcut.registerShortcut(create, ['ctrl+n', 'cmd+n'], 'New', 'Create a new file')
    return () => {
      const { shortcut } = props
      shortcut.unregisterShortcut(['ctrl+n', 'cmd+n'])
      shortcut.unregisterShortcut(['ctrl+s', 'cmd+s'])
    }
  }, [])

  const { isSaved, totalFiles } = state

  return (
    <div>
      <div>Save the file with <strong>Ctrl + S</strong></div>
      <div>File status: {isSaved ? 'Saved' : 'Not Saved'}</div>
      <div>Total Files: {totalFiles}</div>
    </div>
  )
}

shortcut: {
  registerShortcut?: (
    method: (e?: React.KeyboardEvent<any>) => any,
    keys: string[],
    title: string,
    description: string,
    holdDuration?: number,
  ) => void
  registerSequenceShortcut?: (
    method: () => any,
    keys: string[],
    title: string,
    description: string,
  ) => void
  shortcuts: Shortcut[]
  triggerShortcut?: (key: string) => any
  unregisterShortcut?: (keys: string[]) => void
}