// @flow
import React from "react"
import Button from "@material-ui/core/Button"
import Dialog from "@material-ui/core/Dialog"
import DialogActions from "@material-ui/core/DialogActions"
import DialogTitleDisplay from "components/common/DialogTitleDisplay"
import HelpDialogContent from "./HelpDialogContent"
import { useAppBarState } from "components/Stocks/Catalogs/common/AppBar/AppBarContext"

/**
 * HelpDialog is the dialog box that appears when the user clicks
 * the help icon in the catalog app bar.
 */

export const HelpDialog = () => {
  const [{ helpDialogOpen }, dispatch] = useAppBarState()

  const handleClose = () => {
    dispatch({
      type: "SET_HELP_DIALOG_OPEN",
      payload: false,
    })
  }

  return (
    <Dialog
      onClose={handleClose}
      fullWidth
      aria-labelledby="help-dialog-title"
      open={helpDialogOpen}>
      <DialogTitleDisplay title="Catalog Page Help" handleClose={handleClose} />
      <HelpDialogContent />
      <DialogActions>
        <Button onClick={handleClose} variant="outlined" color="default">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default HelpDialog

@@ -322,18 +322,18 @@
 AppBarSt
-at
+or
 e %7D from
@@ -593,18 +593,18 @@
 AppBarSt
-at
+or
 e()%0A%0A  c

update appbar store reference