import { Breadcrumbs } from './breadcrumbs'
import { ToastParams } from './toasts'

export type ActionParams = Partial<Breadcrumbs> & Partial<ToastParams>

interface ActionTypes {
  START_LOADING: 'START_LOADING'
  STOP_LOADING: 'STOP_LOADING'
  INSERT_BREADCRUMB_EXTRA_LEVELS: 'INSERT_BREADCRUMB_EXTRA_LEVELS'
  CLEAR_BREADCRUMB_EXTRA_LEVELS: 'CLEAR_BREADCRUMB_EXTRA_LEVELS'
  SHOW_TOAST: 'SHOW_TOAST'
  HIDE_TOAST: 'HIDE_TOAST'
}

export const ActionTypes: ActionTypes = {
  START_LOADING: 'START_LOADING',
  STOP_LOADING: 'STOP_LOADING',
  INSERT_BREADCRUMB_EXTRA_LEVELS: 'INSERT_BREADCRUMB_EXTRA_LEVELS',
  CLEAR_BREADCRUMB_EXTRA_LEVELS: 'CLEAR_BREADCRUMB_EXTRA_LEVELS',
  SHOW_TOAST: 'SHOW_TOAST',
  HIDE_TOAST: 'HIDE_TOAST',
}

export interface Action extends ActionParams {
  type: keyof typeof ActionTypes
}

export interface Message {
  /**
   * Format of the object returned from
   * any of the actions.
   * */
  action: Action
}

/**
 * Helper interface to be used along with
 * event listeners. This should be mostly used
 * on the admin-shell itself.
 *
 * # @example
 * ```jsx
 * // other necessary imports up here...
 * import { ReceivedMessage, ActionTypes } from `admin-shell-utils`
 *
 * const App = () => {
 *  const [isLoading, setIsLoading] = useState<ActionTypes | null>()
 *  const messageListener = ({ origin, data }: ReceivedMessage) => {
 *    const type = data?.action.type
 *    if (type === ActionTypes.START_LOADING || type === ActionTypes.STOP_LOADING) {
 *      setIsLoading(type)
 *    }
 *  }
 *
 *  useEffect(() => {
 *    window.addEventListener('message', messageListener, false)
 *    return () =>
 *      window.removeEventListener('message', messageListener, false)
 *   }, [])
 *
 *   return (
 *     // some ui here
 *   )
 *  }
 * ```
 * */
export interface ReceivedMessage {
  origin: string
  data?: Message
}