import { createContext, useContext } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Dialog from '@material-ui/core/Dialog'
import { editorMenuConfig } from './menuConfig'

const useStyles = makeStyles({
  root: {
    transform: `translate3d(0,0,50px)`,
  },
})

interface ShortcutsModalContextType {
  open: boolean
  toggleOpen: () => any
}

export const ShortcutsModalContext = createContext<ShortcutsModalContextType>({
  open: false,
  toggleOpen: () => {},
})

export function useShortcutsModalContext() {
  return useContext(ShortcutsModalContext)
}

const AllShortcutsModal = () => {
  const classes = useStyles()
  const { open, toggleOpen } = useShortcutsModalContext()

  return (
    <>
      <Dialog
        open={open}
        onClose={() => toggleOpen()}
        className={classes.root + ' bg-transparent'}
        PaperProps={{
          style: {
            backgroundColor: 'transparent',
          },
        }}
      >
        <div className="bg-ch-gray-700 font-fira-sans shadow-lg text-ch-gray-300 p-4">
          <h2 className="text-2xl mb-4">All Shortcuts</h2>
          {editorMenuConfig
            .filter((menu) => menu.items.length)
            .map((menu) => (
              <section key={'allshortcuts-' + menu.name} className="my-6">
                <h3 className="text-xl border-b-2 pb-2 mb-2">{menu.label}</h3>
                {menu.items.map((item) => (
                  <div
                    className="flex gap-16 justify-between"
                    key={'allshortcuts-' + menu.name + '-' + item.label}
                  >
                    <p>{item.label}</p>
                    <span className="text-right font-fira-code text-ch-gray-400">
                      {item.shortcutLabel}
                    </span>
                  </div>
                ))}
              </section>
            ))}
        </div>
      </Dialog>
    </>
  )
}

export default AllShortcutsModal