/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import React from 'react'
import {bool, func, string} from 'prop-types'
import MenuItem from '@instructure/ui-core/lib/components/Menu/MenuItem'
import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
import Text from '@instructure/ui-elements/lib/components/Text'
import I18n from 'i18n!gradebook'

export default function SpeedGraderSettingsMenu(props) {
  function handleModerationPageSelect () {
    const url = `/courses/${props.courseID}/assignments/${props.assignmentID}/moderate`
    window.open(url, '_blank')
  }

  function handleHelpSelect () {
    SpeedGraderSettingsMenu.setURL(props.helpURL)
  }

  // We're foregoing the use of InstUI buttons or instructure-icons icons here to be consistent
  // with the look/styling of this button's siblings. When those siblings have been updated to
  // use InstUI + instructure-icons, we can do the same here
  const menuTrigger = (
    <button
      type="button"
      className="Button Button--icon-action gradebookActions__Button"
      title={I18n.t('Settings')}
    >
      <i className="icon-settings" aria-hidden="true" />
      <span className="screenreader-only" aria-hidden="true">
        {I18n.t('SpeedGrader Settings')}
      </span>
    </button>
  )

  return (
    <PopoverMenu contentRef={props.menuContentRef} placement="bottom end" trigger={menuTrigger}>
      <MenuItem name="options" onSelect={props.openOptionsModal} value="options">
        <Text>{I18n.t('Options')}</Text>
      </MenuItem>

      {props.showModerationMenuItem && (
        <MenuItem name="moderationPage" onSelect={handleModerationPageSelect} value="moderationPage">
          <Text>{I18n.t('Moderation Page')}</Text>
        </MenuItem>
      )}

      <MenuItem name="keyboardShortcuts" onSelect={props.openKeyboardShortcutsModal} value="keyboardShortcuts">
        <Text>{I18n.t('Keyboard Shortcuts')}</Text>
      </MenuItem>

      {props.showHelpMenuItem && (
        <MenuItem name="help" onSelect={handleHelpSelect} value="help">
          <Text>{I18n.t('Help')}</Text>
        </MenuItem>
      )}
    </PopoverMenu>
  )
}

SpeedGraderSettingsMenu.propTypes = {
  assignmentID: string.isRequired,
  courseID: string.isRequired,
  helpURL: string.isRequired,
  menuContentRef: func,
  openOptionsModal: func.isRequired,
  openKeyboardShortcutsModal: func.isRequired,
  showHelpMenuItem: bool.isRequired,
  showModerationMenuItem: bool.isRequired
}

SpeedGraderSettingsMenu.defaultProps = {
  menuContentRef: null
}

SpeedGraderSettingsMenu.setURL = function (url) {
  window.location.href = url
}
@@ -780,88 +780,20 @@
 Menu
-Item from '@instructure/ui-core/lib/components/Menu/MenuItem'%0Aimport PopoverMenu
+, %7BMenuItem%7D
  fro
@@ -815,12 +815,12 @@
 /ui-
-core
+menu
 /lib
@@ -831,23 +831,16 @@
 ponents/
-Popover
 Menu'%0Aim
@@ -940,322 +940,8 @@
 k'%0A%0A
-export default function SpeedGraderSettingsMenu(props) %7B%0A  function handleModerationPageSelect () %7B%0A    const url = %60/courses/$%7Bprops.courseID%7D/assignments/$%7Bprops.assignmentID%7D/moderate%60%0A    window.open(url, '_blank')%0A  %7D%0A%0A  function handleHelpSelect () %7B%0A    SpeedGraderSettingsMenu.setURL(props.helpURL)%0A  %7D%0A%0A  
 // W
@@ -1030,18 +1030,16 @@
 sistent%0A
-  
 // with 
@@ -1123,18 +1123,16 @@
 ated to%0A
-  
 // use I
@@ -1182,18 +1182,16 @@
 me here%0A
-  
 const me
@@ -1204,18 +1204,16 @@
 ger = (%0A
-  
   %3Cbutto
@@ -1218,18 +1218,16 @@
 ton%0A    
-  
 type=%22bu
@@ -1236,18 +1236,16 @@
 on%22%0A    
- 
- 
 classNam
@@ -1304,18 +1304,16 @@
 on%22%0A    
-  
 title=%7BI
@@ -1335,18 +1335,16 @@
 ')%7D%0A
-  
   %3E%0A    
   %3Ci
@@ -1339,18 +1339,16 @@
   %3E%0A    
-  
 %3Ci class
@@ -1390,18 +1390,16 @@
 rue%22 /%3E%0A
-  
     %3Cspa
@@ -1446,26 +1446,24 @@
 den=%22true%22%3E%0A
-  
       %7BI18n.
@@ -1493,18 +1493,16 @@
 ')%7D%0A    
-  
 %3C/span%3E%0A
@@ -1503,18 +1503,16 @@
 span%3E%0A  
- 
- 
 %3C/button
@@ -1517,36 +1517,340 @@
 on%3E%0A
-  )%0A%0A  return (%0A    %3CPopover
+)%0A%0Aexport default function SpeedGraderSettingsMenu(props) %7B%0A  function handleModerationPageSelect () %7B%0A    const url = %60/courses/$%7Bprops.courseID%7D/assignments/$%7Bprops.assignmentID%7D/moderate%60%0A    window.open(url, '_blank')%0A  %7D%0A%0A  function handleHelpSelect () %7B%0A    SpeedGraderSettingsMenu.setURL(props.helpURL)%0A  %7D%0A%0A%0A  return (%0A    %3C
 Menu
@@ -2665,15 +2665,8 @@
   %3C/
-Popover
 Menu

upgrade speedGraderSettingsMenu to instUI 5