import { shell } from './shell'
import { ACTIONS } from './core'

/**
 * Function to hide a previously displayed toast. It should
 * be used along with the `showToast` method.
 *
 * ## @example
 * ```jsx
 * // other necessary imports up here...
 * import { showToast, hideToast } from `admin-shell-utils`
 *
 * const App = () => {
 *  const { formatMessage } = useIntl()
 *
 *  return (
 *    <div>
 *      <button onClick={() => {
 *         showToast({
 *           payload: formatMessage({ id: 'admin/my-example-app.some-toast-message' })
 *         })
 *       }}>Show toast</button>
 *      <button onClick={() => {
 *          hideToast()
 *        }}>Ok, enough of this toast</button>
 *    </div>
 *  )
 * }
 * ```
 */
export function hideToast() {
  shell.postMessage(ACTIONS.HIDE_TOAST(), '*')
}

/**
 * Function to display a toast on the admin-shell level.
 * It displays the payload as the toast message.
 *
 * ## @example
 * ```jsx
 * // other necessary imports up here...
 * import { showToast } from `admin-shell-utils`
 *
 * const App = () => {
 *  const { formatMessage } = useIntl()
 *
 *  return (
 *    <div>
 *      <button onClick={() => {
 *         showToast({
 *           payload: formatMessage({ id: 'admin/my-example-app.some-toast-message' })
 *         })
 *       }}
 *      />
 *    </div>
 *  )
 * }
 * ```
 */
export function showToast({ payload }: ToastParams) {
  shell.postMessage(
    ACTIONS.SHOW_TOAST({
      payload,
    }),
    '*'
  )
}

export interface ToastParams {
  /**
   * Payload of the toast, or toast message.
   * */
  payload: string
}