import { IComponentController } from 'angular'
import _ from 'lodash'
import { Component, Inject, Input, Output } from '../decorators'


@Component({
	selector: 'mflyDropdownMenu',
	template: require('./dropdown-menu.html'),
	transclude: true,
})
export default class DropdownMenuController implements IComponentController {

	@Input() isDisabled?: boolean
	@Input() menuStaysOpen?: boolean
	@Input('@') menuTheme?: string
	@Input('@') pinsTo?: string
	@Output() onOpen?: () => void
	@Output() onToggle: ({ isOpen }: { isOpen: boolean }) => void

	private open: boolean

	constructor(
		@Inject('$element') private $element: ng.IAugmentedJQuery,
		@Inject('$timeout') private $timeout: ng.ITimeoutService,
	) {}

	$onChanges(changes: { isDisabled: ng.IChangesObject<boolean> }) {
		if (changes.isDisabled.currentValue) {
			this.$timeout(() => this.$element.find('.o-dropdown-menu__toggle').addClass('is-disabled'))
		} else {
			this.$timeout(() => this.$element.find('.o-dropdown-menu__toggle').removeClass('is-disabled'))
		}
	}

	$onInit() {
		this.open = false

		// Handle CSS positioning & theme options.
		// Default position is "bottom left".
		// Default theme is none, i.e., light theme.
		//
		// This is wrapped in a $timeout to avoid a race condition where the
		// transcluded dropdown-menu contents are not available at link time
		// for the CSS classes to be correctly applied.
		this.$timeout(() => {

			if (_.includes(this.pinsTo, 'right')) {
				this.$element.find('.o-dropdown-menu__contents').addClass('is-pinned-right')
			} else {
				this.$element.find('.o-dropdown-menu__contents').addClass('is-pinned-left')
			}

			if (_.includes(this.pinsTo, 'top')) {
				this.$element.find('.o-dropdown-menu__contents').addClass('is-pinned-top')
			} else {
				this.$element.find('.o-dropdown-menu__contents').addClass('is-pinned-bottom')
			}

			if (_.includes(this.menuTheme, 'dark')) {
				this.$element.find('.o-dropdown-menu__contents').addClass('is-dark-theme')
			}
		})
	}

	// These functions are accessed by child components dropdown-menu-contents and dropdown-menu-toggle
	disabled(): boolean {

		return !!this.isDisabled
	}

	isOpen(value?: boolean): boolean {

		if (value !== undefined && value !== this.open && this.onToggle) {

			this.onToggle({ isOpen: !!value })
		}

		if (value !== undefined) {

			this.open = value
		}

		return !!this.open
	}
}