<template>
  <span class="action-buttons" v-if="!loading">
    <q-icon
      v-for="(action, i) in sub.componentOptions.actions"
      :key="i"
      size="sm"
      :color="action.color"
      :name="action.icon"
      :class="[
        action.hide && action.hide(row) && 'hidden',
        action.disabled && action.disabled(row) && 'disabled',
      ]"
      @click="handleClick(action)"
    >
      <q-tooltip v-if="action.tooltipText">{{ action.tooltipText }}</q-tooltip>
    </q-icon>
  </span>
  <upload-status
    v-else
    status="pending"
    :label-size="12"
    :size="24"
    :line-width="2"
  />
</template>

<script lang="ts">
import UploadStatus from '@/components/common/upload-status/index.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';

interface ActionButton {
  icon: string;
  cb: (row: Record<string, string>) => void;
  color: string;
  tooltipText?: string;
  disabled: (row: Record<string, string>) => boolean;
  hide: (row: Record<string, string>) => boolean;
}

@Component({
  inheritAttrs: false,
  components: { UploadStatus },
})
export default class ActionButtonsCell extends Vue {
  @Prop()
  sub: {
    componentOptions: {
      loadingIds: string[];
      actions: ActionButton[];
    };
  };

  @Prop()
  row: Record<string, string>;

  get loading(): boolean {
    return !!(this.sub.componentOptions.loadingIds as string[])?.includes(
      this.row?.id
    );
  }

  handleClick(action: ActionButton): void {
    if (action?.disabled?.(this.row)) return;
    action.cb(this.row);
  }
}
</script>

<style lang="scss" scoped>
.action-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
  > * {
    cursor: pointer;
    display: block;
    &.hidden {
      display: none;
    }
  }

  .disabled {
    cursor: not-allowed;
    color: lightgrey;
  }

  &.loading {
    background: rgba(grey, 0.2);
    backdrop-filter: blur(2px);
  }
}
</style>
