<template>
  <div class="bulk-operation-container">
    <div class="bulk-operation-info-container">
      <div class="bulk-operation-info-icon">
        <ph-file size="28"></ph-file>
      </div>
      <div class="bulk-operation-info">
        <div>{{ operation.processing_type.toLowerCase() }} {{ operation.file_type.toLowerCase() }}</div>
        <div class="bulk-operation-date">{{ buildDate(operation.timestamp) }}</div>
      </div>
    </div>
    <div class="bulk-operation-status">
      <div v-if="operation.state === 'EXCEPTION'">
        <tooltip v-if="operation.error" min-width="500px" :text="shortend(operation.error?.message)" position="left">
          <basic-badge variant="exception">ERROR</basic-badge>
        </tooltip>
        <basic-badge v-else variant="exception">ERROR</basic-badge>
      </div>
      <basic-badge v-else-if="operation.state === 'COMPLETED'">COMPLETED</basic-badge>
      <basic-badge v-else-if="operation.state === 'SCHEDULED'" variant="skeleton">SCHEDULED</basic-badge>
      <basic-badge v-else-if="operation.state === 'PROCESSING'" variant="skeleton">PROCESSING</basic-badge>

    </div>
    <div class="bulk-operation-file">

      <spinner size="s" v-if="operation.state === 'PROCESSING' || operation.state === 'SCHEDULED'"></spinner>
      <div v-else-if="operation.processing_type === 'EXPORT'">
        <tooltip text="Download data export" position="left">
          <icon-button icon="download" @click="$emit('download' , operation.id)"></icon-button>
        </tooltip>
      </div>

    </div>

  </div>
</template>

<script>

import BasicButton from "@/components/UI/BasicButton.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Tooltip from "@/components/UI/Tooltip.vue";
import Spinner from "@/components/UI/Spinner.vue";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import {buildDate} from "@/common.js";

export default {
  name: "BulkOperation",
  components: {BasicBadge, Spinner, Tooltip, IconButton, BasicButton},
  props: {
    operation: {
      type: Object,
      required: true
    }
  },
  methods: {
    shortend(string) {
      if (((string ?? null) === null) || string.length < 350)
        return string;

      return string.substring(0, 350) + "..."
    },
    buildDate(date) {
      return buildDate(date, true);
    },
  },
  data() {
    return {}
  }
};
</script>


<style scoped>

.bulk-operation-file {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.bulk-operation-info-icon {
  color: #6B869C;
}

.bulk-operation-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

.bulk-operation-container {
  padding: 0.8rem 0;

}

.bulk-operation-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bulk-operation-status {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;

}

.bulk-operation-container {
  display: grid;
  grid-template-columns: 1fr 3fr 5rem;
  font-size: 1.4rem;
  gap: 3.6rem;
  color: #001D33;
  width: 100%;
}

.bulk-operation-date {
  font-size: 1.2rem;
  color: #6B869C;
}

</style>