import { StateOrName } from '@uirouter/angularjs'
import { IComponentController } from 'angular'
import { Component, Inject, Input, Output } from '../decorators'
import DropdownMenuController from './dropdown-menu'


@Component({
	require: {
		parent: '^mflyDropdownMenu'
	},
	selector: 'mflyDropdownMenuAction',
	template: require('./dropdown-menu-action.component.html'),
	transclude: true
})
export default class MflyDropdownMenuAction implements IComponentController {

	@Input('@') actionHref!: string
	@Input('@') actionHrefTarget!: string
	@Input() actionSref!: { state: StateOrName, params: {}, options: {} }
	@Input() disable!: boolean

	@Output() action?: () => void

	private parent: DropdownMenuController

	constructor(
		@Inject('$attrs') private $attrs: ng.IAttributes,
		@Inject('$element') private $element: JQuery,
		@Inject('$rootScope') private $rootScope: JSUIRootScope,
	) {}

	$onInit() {

		// & bindings provide a function even if nothing is bound. This isn't
		// the case for attrs and we want scope to behave that way as well:
		if (!this.$attrs.action) {
			this.action = undefined
		}

		// Clicks on `action` type items as well as disabled `action-href`
		// type items should both prevent the menu from closing if that
		// option is set on the dropdown.
		this.$element.on('click', (event) => {
			event.stopPropagation()

			if (!this.parent.menuStaysOpen) {
				this.$rootScope.$broadcast('dropdown-menu:close')
			}
		})
	}

	// Accessibility - call the provided action
	// on space or return
	keyPress = ($event) => {
		const code = $event.charCode || $event.keyCode
		if (code === 32 || code === 13) {
			this.performAction()
			this.$rootScope.$broadcast('dropdown-menu:close')
		}
	}

	// Wrap the action so we can disable it if needed
	performAction() {

		// Otherwise, call the provided action
		if (!this.disable && this.action) {
			this.action()
		}
	}

}