<template>
  <th scope="col" class="mc-datatable__head" :class="classObject">
    <button
      v-if="sortable"
      type="button"
      class="mc-datatable__sort mc-datatable__btn"
      :class="sortDirection?.toLowerCase()"
      @click="() => toggleSort(value, sortDirection, additionnalProps)"
    >
      <span class="mc-datatable__sort-label">
        <span class="visually-hidden">sort by</span>
        <slot :props="props">
          {{ label }}
        </slot>
      </span>

      <span class="mc-datatable__sort-arrow" />
    </button>
    <slot v-else :props="props">
      {{ label }}
    </slot>
  </th>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MDataTableHeaderV2',
});
</script>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  /**
   * Header cell label
   */
  label: {
    type: String,
    default: '',
  },
  /**
   * Refers to a key, present in the items object, whose content will be displayed in the cells of the column
   */
  value: {
    type: String,
    default: '',
  },
  /**
   * Defines whether the column is sortable or not
   */
  sortable: {
    type: Boolean,
    default: false,
  },
  /**
   * Defines sort order (Ascending or Descending).
   * @values ASC, DESC
   */
  sortDirection: {
    type: String,
    default: null,
    validator: (value) => ['ASC', 'DESC'].includes(value),
  },
  /**
   * Defines sort order on component loading
   * @values ASC, DESC
   */
  sortDirectionDefault: {
    type: String,
    default: null,
    validator: (value) => ['ASC', 'DESC'].includes(value),
  },
  /**
   * Passes additional attributes to the header cell. This must be an object that will be dynamically linked to the component.
   * @see https://vuejs.org/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes
   */
  additionnalProps: {
    type: Object,
    default: null,
  },
  /**
   * Defines header cell as associated with `selectable` cells
   */
  selectable: {
    type: Boolean,
    default: false,
  },
  /**
   * Defines header cell as associated with `expandable` cells
   */
  expandable: {
    type: Boolean,
    default: false,
  },
  e2eSelector: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:sortDirection']);

const classObject = computed(() => {
  return {
    'mc-datatable__cell-button': props.expandable,
    'mc-datatable__cell-checkbox': props.selectable,
  };
});

function toggleSort(column, _sortDirection, additionnalProps) {
  let direction;
  switch (_sortDirection) {
    case 'ASC':
      direction = 'DESC';
      break;
    case 'DESC':
      direction = null;
      break;
    default:
      direction = 'ASC';
  }
  emit('update:sortDirection', { column, direction, ...additionnalProps });
}
</script>

<style lang="scss" scoped>
@import 'settings-tools/all-settings';

.mc-datatable__sort {
  &::after {
    display: none;
  }

  &:focus {
    .mc-datatable__sort-arrow {
      @include set-shadow-focus();

      border-radius: $size-focus-radius;
    }
  }
}
</style>
