<template>
  <tr :class="{ 'is-loading': TfTable.isSorting }">
    <slot>
      <TfTableTd
        v-for="column in TfTable.tableMeta.columns"
        :key="column.prop"
        v-bind="{ column, rowData }"
      >
        <template #emptyCell>
          <slot name="emptyCell">
            &mdash;
          </slot>
        </template>
      </TfTableTd>
    </slot>
    <td
      v-if="TfTable.hasChildren || rowHasChildren"
      width="50"
      class="cell-prop-toggle"
      :class="{ 'show-toggle': rowHasChildren }"
    >
      <TfButton
        v-if="rowHasChildren"
        :class="['btn-toggle-row', { 'is-expanded' : isExpanded }]"
        :type="isExpanded ? 'primary' : 'secondary'"
        :no-border="true"
        icon="angle-up"
        size="icon-no-fill"
        @click="TfTable.toggleChildRow(rowData.id)"
      />
    </td>
  </tr>
</template>

<script>
  /**
   * TfTableParentRow is a component that is used as a child of the TfTable component. It will render a TfTableTd for each column by default.
   * It also controls the expansion logic for the row. If using #parentRow slot, the parent needs to account for showing an additional td when there are no children for the row but some data in the table does.
   *
   * @vuedoc
   * @exports TfTable/ParentRow
   * @category Components
   */
  export default {
    name: 'TfTableParentRow',
    inject: ['TfTable'],
    props: {
      rowData: {
        type: Object,
        default: () => ({}),
      },
    },
    computed: {
      /**
       * Evaluates the tables expanded children for this row's id.
       *
       * @returns {boolean}
       */
      isExpanded() {
        return this.TfTable.expandedChildren.includes(this.rowData.id);
      },
      /**
       * Evaluates if the row has children.
       *
       * @returns {boolean}
       */
      rowHasChildren() {
        return this.rowData.children && this.rowData.children.length;
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  tr {
    &.is-loading {
      opacity: .5;
    }
  }

  .cell-prop-toggle {
    position: relative;

    &.show-toggle {
      border-left: 1px solid $tf-extra-light-gray-1;
    }

    .table-parent & {
      padding: 0;
    }
  }

  ::v-deep.tf-button.btn-toggle-row {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    // min-height is here to fix an IE11 issue but since
    // we only use the toggle on the admin site AND chrome, we don't need to fully fix this yet.
    min-height: 50px;
    color: $tf-dark-gray;

    &:hover {
      border: none;
    }

    svg {
      width: 22px;
      height: 22px;
      transition: transform .3s;
    }

    &:not(.is-expanded) {
      color: $tf-blue;

      svg {
        transform: rotateZ(180deg);
      }
    }
  }
</style>
