<template>
	<li 
		:style="{cursor: disabled ? 'not-allowed' : 'pointer'}"
		:class="liClasses"
		@click="sendClick">
		<slot>{{ value }}</slot>
	</li>
</template>

<script>
/**
 * A control button used by the pager.
 * 
 * @module datatable-pager-button
 * 
 * @vue-prop {boolean} [disabled = false] - Defines if the button is triggerable or not.
 * @vue-prop {boolean} [selected = false] - Represents if the pager button is the currently selected one.
 * @vue-prop {number} value               - The page index of the button.
 * 
 * @vue-computed {string} aClasses   - HTML classes to set on link tags.
 * @vue-computed {string} liClasses  - HTML classes to set on list items tags.
 * @vue-computed {Settings} settings - Reference to the {@link Settings} object linked to the parent pager.
 */
export default {
	props: {
		disabled: {
			type:    Boolean,
			default: false,
		},
		selected: {
			type:    Boolean,
			default: false,
		},
		value: {
			type:     Number,
			required: false,
			default:  null,
		},
	},
	computed: {
		liClasses(){
			const classes = [ this.settings.get( 'pager.classes.li' ) ];

			if ( this.disabled ){
				classes.push( this.settings.get( 'pager.classes.disabled' ) );
			}

			if ( this.selected ){
				classes.push( this.settings.get( 'pager.classes.selected' ) );
			}

			return classes.filter( v => !!v ).join( ' ' );
		},
		settings(){
			return this.$parent.settings;
		},
	},
	methods: {
		/**
		 * Emits an event if the button is not {@link datatable-pager-button#disabled}.
		 * 
		 * @emits click.
		 * @returns {void} Nothing.
		 */
		sendClick(){
			if ( !this.disabled ){
				this.$emit( 'click', this.value );
			}
		},
	},
};
</script>