<template>
  <ElTabs
    v-bind="{
      ...$attrs,
      ...$props,
      type,
    }"
    :class="tabClass"
    v-on="$listeners"
  >
    <slot />
  </ElTabs>
</template>

<script>
  /**
   * "TfTabs" is a wrapper component of el-tabs that will, time permitting,
   * be replaced with our own component that is prop/emit compatible with
   * the Element one. https://element.eleme.io/#/en-US/component/dialog#dialog
   *
   * @vuedoc
   * @exports TfTabs
   * @category components
   */
  export default {
    name: 'TfTabs',
    inheritAttrs: false,
    props: {
      /**
       * Currently only used by the `file` type, locked: true makes the
       * unselected tabs look disabled. Switching has to be disabled in
       * the implementation by reacting to @tab-click events.
       */
      locked: {
        type: Boolean,
        default: false,
      },
      /**
       * The type of tab design that we're rendering.
       * Currently supporting `large` (default), `small`, `text`, and `file`
       */
      type: {
        type: String,
        default: 'large',
        validator: (value) => ['large', 'small', 'text', 'file'].includes(value),
      },
    },
    computed: {
      /**
       * Apply an class based on the `type` prop. The default tab type, large, require no class.
       *
       * @returns {string}
       */
      tabClass() {
        const classes = this.locked ? ['locked'] : [];

        if (!['', 'large'].includes(this.type)) {
          classes.push(`${this.type}-tabs`);
        }

        return classes;
      },
    },
  };
</script>
