<template>
	<th
		:style="{'text-align': column.headerAlign, cursor: canSort ? 'pointer' : 'auto'}"
		:class="column.headerClass"
		@click="toggleSort">
		<component
			:is="column.headerComponent"
			v-if="column.headerComponent"
			:column="column" />
		<span v-else>
			{{ column.label }}
		</span>
		<span
			v-if="canSort"
			v-html="sortButtonHtml" />
	</th>
</template>

<script>
/**
 * A control button used by the pager.
 * 
 * @module datatable-pager-button
 * 
 * @vue-prop {Column} column                            - The {@link Column} instance this header is for.
 * @vue-prop {Settings} settings                        - The {@link Settings} instance associated with this {@link datatable}'s header.
 * @vue-prop {'asc' | 'desc' | null} [direction = null] - The current sort direction for the current column.
 * 
 * @vue-computed {boolean} canSort            - `true` if this column is sortable.
 * @vue-computed {boolean} isSortedAscending  - `true` if this column is sorted in *ascending* mode.
 * @vue-computed {boolean} isSortedDescending -`true` if this column is sorted in *descending* mode.
 * @vue-computed {boolean} isSorted           - `true` if this column is sorted, in any mode.
 * @vue-computed {string} classes             - HTML classes to apply on this header.
 */
export default {
	model: {
		prop:  'direction',
		event: 'change',
	},
	props: {
		column: {
			type:     Object,
			required: true,
		},
		settings: {
			type:     Object,
			required: true,
		},
		direction: {
			type:    String,
			default: null,
		},
	},
	computed: {
		canSort(){
			return this.column.sortable;
		},
		isSortedAscending(){
			return this.direction === 'asc';
		},
		isSortedDescending(){
			return this.direction === 'desc';
		},
		isSorted(){
			return this.isSortedAscending || this.isSortedDescending;
		},
		sortButtonHtml(){
			const htmlContents = this.settings.get( 'table.sorting' );

			if ( this.isSortedAscending ){
				return htmlContents.sortAsc;
			} else if ( this.isSortedDescending ){
				return htmlContents.sortDesc;
			} else {
				return htmlContents.sortNone;
			}
		},
	},
	methods: {
		/**
		 * Toggles the sort order, looping between states `null => 'asc' => 'desc'`.
		 * 
		 * @emits change
		 * @returns {void} Nothing.
		 */
		toggleSort(){
			if ( !this.canSort ){
				return;
			}
			if ( !this.direction || this.direction === null ){
				this.$emit( 'change', 'asc', this.column );
			} else if ( this.direction === 'asc' ){
				this.$emit( 'change', 'desc', this.column );
			} else {
				this.$emit( 'change', null, this.column );
			}
		},
	},
};
</script>