import React, { useEffect } from 'react'

import { useSettingsStore } from '../../stores/settings'
import { getKeybindings, ShortcutGroup } from '../KeyboardShortcutHint'
import Dialog, { DialogBody, DialogHeader, DialogHeading } from '../Dialog'
import useTranslationFunction from '../../hooks/useTranslationFunction'

import type { DialogProps } from '../../contexts/DialogContext'

export default function KeybindingCheatSheet(props: DialogProps) {
  const { onClose } = props
  const tx = useTranslationFunction()

  const settingsStore = useSettingsStore()[0]

  useEffect(() => {
    window.__keybindingsDialogOpened = true
    return () => {
      window.__keybindingsDialogOpened = false
    }
  }, [])

  return (
    <Dialog onClose={onClose} className='keyboard-shortcuts-dialog' width={400}>
      <DialogHeader onClose={onClose}>
        <DialogHeading>{tx('keybindings')}</DialogHeading>
      </DialogHeader>
      <DialogBody className='shortcuts-dialog-body'>
        <div className='shortcuts-grid'>
          {settingsStore &&
            getKeybindings(settingsStore.desktopSettings).map(
              (entry, index) => {
                if (entry.type === 'header') {
                  return (
                    <div
                      key={`header-${index}-${entry.title}`}
                      className='shortcuts-section-title'
                    >
                      <h4>{entry.title}</h4>
                    </div>
                  )
                } else {
                  const { action } = entry
                  return (
                    <ShortcutGroup
                      title={action.title}
                      keyBindings={action.keyBindings}
                      key={`shortcut-${index}-${action.title}`}
                    />
                  )
                }
              }
            )}
        </div>
      </DialogBody>
    </Dialog>
  )
}
