<script setup>
import {
  EyeIcon,
  ArrowPathIcon,
  BeakerIcon,
  ArrowDownOnSquareIcon,
} from "@heroicons/vue/24/outline";
const props = defineProps({
  importId: [Number, String],
  isCompleted: Boolean,
  processing: Boolean,
  savingMappings: Boolean,
  canProcess: Boolean,
  selectedMappingsCount: Number,
});
const emits = defineEmits(["preview", "save-mappings", "process-import", "simulate"]);
</script>
<template>
  <div class="flex flex-wrap gap-2 items-center" v-if="!isCompleted">
    <button
      @click.prevent="$emit('preview')"
      :disabled="!importId"
      class="px-4 py-2 bg-gray-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
    >
      <EyeIcon class="h-4 w-4" />
      Predogled vrstic
    </button>
    <button
      @click.prevent="$emit('save-mappings')"
      :disabled="!importId || processing || savingMappings || isCompleted"
      class="px-4 py-2 bg-orange-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
      title="Shrani preslikave za ta uvoz"
    >
      <span
        v-if="savingMappings"
        class="inline-block h-4 w-4 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
      ></span>
      <ArrowPathIcon v-else class="h-4 w-4" />
      <span>Shrani preslikave</span>
      <span
        v-if="selectedMappingsCount"
        class="ml-1 text-xs bg-white/20 px-1.5 py-0.5 rounded"
        >{{ selectedMappingsCount }}</span
      >
    </button>
    <button
      @click.prevent="$emit('process-import')"
      :disabled="!canProcess"
      class="px-4 py-2 bg-purple-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
    >
      <BeakerIcon class="h-4 w-4" />
      {{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
    </button>
    <button
      @click.prevent="$emit('simulate')"
      :disabled="!importId || processing"
      class="px-4 py-2 bg-blue-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
    >
      <ArrowDownOnSquareIcon class="h-4 w-4" />
      Simulacija vnosa
    </button>
  </div>
</template>
