<template>
  <component
    :is="getCellTag"
    class="mc-datatable__cell"
    :class="classObject"
    :scope="scope"
  >
    <!-- @slot Use this slot to replace the entire content of a `<th>` or `<td>` cell in the table row -->
    <slot />
  </component>
</template>

<script>
import { defineComponent, computed } from 'vue';
export default defineComponent({ name: 'MDataTableCell' });
</script>

<script setup>
const props = defineProps({
  /**
   * Allows you to define the type of content that will be inserted in the cell
   * @values 'button', 'checkbox', 'expand', 'icon', 'input', 'number', 'multiline', 'options', 'picture',
   */
  type: {
    type: String,
    default: undefined,
    validator: (value) =>
      [
        'button',
        'checkbox',
        'expand',
        'icon',
        'input',
        'number',
        'multiline',
        'options',
        'picture',
      ].includes(value),
  },
  /**
   * Refers to a key, present in the items object, whose content will be displayed in the cells of the column
   */
  value: {
    type: String,
    default: '',
  },
  /**
   * The value of the HTML `scope` attribute to be placed on `th` tags
   */
  scope: {
    type: String,
    default: undefined,
  },
});

const getCellTag = computed(() => {
  return props.scope ? 'th' : 'td';
});

const classObject = computed(() => {
  return {
    'mc-datatable__cell-button':
      props.type === 'button' ||
      props.type === 'expand' ||
      props.type === 'icon' ||
      props.type === 'options',
    'mc-datatable__cell-checkbox': props.type === 'checkbox',
    'mc-datatable__cell-field': props.type === 'input',
    'mc-datatable__cell-number': props.type === 'number',
    [`mc-datatable__cell--${props.value}`]: props.value,
  };
});
</script>
