import { Vue, Component, Prop } from 'vue-property-decorator';

/**
 * Header of the table
 */
@Component({
    name: 'header',
})
export default class Header extends Vue {
    /**
     * Columns selected by the user
     */
    @Prop({ type: Array, default: () => [] }) readonly selectedColumns!: number[];

    /**
     * Columns hidden by the user
     */
    @Prop({ type: Array, default: () => [] }) readonly hiddenColumns!: number[];

    /**
     * An array of object representing the headers (name of columns and extra information)
     */
    @Prop({ type: Array, required: true }) readonly headers!: any[];

    /**
     * A boolean telling if everything is selected or not
     */
    @Prop({ default: false, type: Boolean }) readonly isAllSelected!: boolean;

    /**
     * Default sort direction when sorting a column (default is ascending).
     * Can be asc or desc
     */
    @Prop({ default: 'asc', type: String }) readonly defaultSortDirection!: string;

    /**
     * Allowing to select columns (or not), default is false
     */
    @Prop({ default: false, type: Boolean }) readonly selectableColumns!: boolean;

    /**
     * Internal state of the component
     */
    state: {[key: string]: any} = {
        currentSortDirection: this.defaultSortDirection,
        currentSortIndex: null,
    };

    /**
     * Method called when a column is selected.
     * This method emits an event (select) to the parent with the column index.
     *
     * @param idx The selected column's index
     */
    selectColumn(idx: number) {
        this.$emit('select', idx, 'column');
    }

    /**
     * Update the internal state of the component with the new sorting
     * direction and new sorted index.
     * The methods also emits an event (sort) with the current sorted index
     * and the direction
     *
     * @param idx The index of the current sorted column
     */
    sort(idx: number) {
        const { currentSortDirection, currentSortIndex } = this.state;
        if (currentSortIndex === idx) {
            this.state.currentSortDirection = currentSortDirection === 'asc' ?
                'desc' : 'asc';
        }

        this.state.currentSortIndex = idx;
        this.$emit('sort',
                   idx,
                   this.state.currentSortDirection);
    }

    /**
     * Test if a column is hidden or not
     * @param idx The index of the column to show
     * @return true if the column needs to be visible (false otherwise)
     */
    showColumn(idx: number): boolean {
        return this.hiddenColumns.find(c => c === idx) == null;
    }

    /**
     * Test if the column is selected or not
     * @param idx The index of the column to set as selected
     * @return true if the column needs to be displayed as selected (false otherwise)
     */
    isSelected(idx: number): boolean {
        return this.selectedColumns.find(c => c === idx) != null;
    }

    /**
     * Select all columns.
     * This methods emits an event (select-all)
     */
    selectAll() {
        this.$emit('select-all');
    }
}