import { IComponentController } from 'angular'
import {Component, Input, Output} from '../decorators'
import TabGroupController from './tab-group'

@Component({
	selector: 'mflyTab',
	template: require('./tab.html'),
	transclude: true,
	require: {
		parent: '^mflyTabGroup'
	}
})
export default class TabController implements IComponentController {

	@Input('<')
	isDisabled?: boolean

	@Input('<')
	isHidden?: boolean

	@Input('<')
	loadTab?: boolean

	@Input('@')
	tabId!: string

	@Input('@')
	tabTitle?: string

	@Output()
	tabChangeStart?: (selectedTab) => Promise<boolean>

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

	protected parent: TabGroupController
	protected htmlTitle: any

	$onInit() {

		if (this.loadTab || typeof(this.loadTab) === 'undefined') {
			this.parent.registerTab(this)
		}
	}

	$onChanges(changes: { isHidden?: ng.IChangesObject<boolean> }) {
		if (!changes.isHidden) { return }
		if (changes.isHidden.currentValue === changes.isHidden.previousValue) { return }

		this.parent.onTabHideChange(this)
	}

	setHtmlTitle(htmlTitle) {
		this.htmlTitle = htmlTitle
	}
}