<script setup>
import {
  EyeIcon,
  ArrowPathIcon,
  BeakerIcon,
  ArrowDownOnSquareIcon,
} from "@heroicons/vue/24/outline";
import { Button } from '@/Components/ui/button';
import { Badge } from '@/Components/ui/badge';

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
      variant="secondary"
      @click.prevent="$emit('preview')"
      :disabled="!importId"
    >
      <EyeIcon class="h-4 w-4 mr-2" />
      Predogled vrstic
    </Button>
    <Button
      variant="default"
      class="bg-orange-600 hover:bg-orange-700"
      @click.prevent="$emit('save-mappings')"
      :disabled="!importId || processing || savingMappings || isCompleted"
      title="Shrani preslikave za ta uvoz"
    >
      <span
        v-if="savingMappings"
        class="inline-block h-4 w-4 mr-2 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
      ></span>
      <ArrowPathIcon v-else class="h-4 w-4 mr-2" />
      <span>Shrani preslikave</span>
      <Badge
        v-if="selectedMappingsCount"
        variant="secondary"
        class="ml-2 text-xs"
      >{{ selectedMappingsCount }}</Badge>
    </Button>
    <Button
      variant="default"
      class="bg-purple-600 hover:bg-purple-700"
      @click.prevent="$emit('process-import')"
      :disabled="!canProcess"
    >
      <BeakerIcon class="h-4 w-4 mr-2" />
      {{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
    </Button>
    <Button
      variant="default"
      class="bg-blue-600 hover:bg-blue-700"
      @click.prevent="$emit('simulate')"
      :disabled="!importId || processing"
    >
      <ArrowDownOnSquareIcon class="h-4 w-4 mr-2" />
      Simulacija vnosa
    </Button>
  </div>
</template>
