<template>
  <div class="flex flex-col gap-2">
    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>

    <Scanner v-if="!scanned" useInput @code="checkCode" />

    <div v-if="scanned" class="contents">
      <div class="flex flex-col gap-2 h-80 overflow-y-scroll pr-2">
        <div v-if="status != undefined" class="flex flex-row gap-2 h-7 w-7 mx-auto">
          <p>Suche</p>
          <Spinner v-if="status == 'loading'" class="my-auto" />
          <SuccessCheckmark v-else-if="status == 'success'" />
          <FailureXMark v-else-if="status == 'failed'" />
        </div>
        <p v-else-if="available.length == 0" class="mx-auto">nichts gefunden</p>
        <div
          v-for="item in available"
          :key="item.id"
          class="rounded-md p-2 cursor-pointer box-border border-2 font-medium"
          :class="
            item.type == selected?.type && item.id == selected.id
              ? 'bg-primary text-white border-transparent hover:bg-accent'
              : 'border-primary text-black hover:bg-primary hover:text-white'
          "
          @click="selected = item"
        >
          <p>
            {{ item.name }} <small>({{ item.code }})</small>
          </p>
          <p>Typ: {{ item.type }}</p>
        </div>
      </div>
      <button
        v-if="selected != undefined"
        primary
        :disabled="status == 'loading'"
        @click="
          $emit('data', selected);
          $emit('nextStep', 'input');
        "
      >
        mit ausgewähltem fortfahren
      </button>
      <button
        primary-outline
        :disabled="status == 'loading'"
        @click="
          scanned = false;
          code = '';
        "
      >
        neu Scannen
      </button>
    </div>
    <p v-if="message" class="text-center">{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import ScanInput from "@/components/scanner/ScanInput.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import Scanner from "@/components/scanner/Scanner.vue";
import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
</script>

<script lang="ts">
export default defineComponent({
  emits: {
    nextStep: (s: string) => true,
    stepBack: () => true,
    data: (gear: MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel) => true,
  },
  data() {
    return {
      code: "" as string,
      status: undefined as undefined | "loading" | "success" | "failed",
      message: "" as string,
      available: [] as Array<MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel>,
      selected: undefined as
        | undefined
        | MinifiedEquipmentViewModel
        | MinifiedVehicleViewModel
        | MinifiedWearableViewModel,
      scanned: false as boolean,
    };
  },
  methods: {
    checkCode(c: string) {
      this.available = [];
      this.selected = undefined;
      this.scanned = true;
      this.status = "loading";
      this.code = c;
      this.$http
        .get(`/public/reportdamage?code=${this.code}`)
        .then((res) => {
          this.available = res.data;
          this.status = "success";
        })
        .catch((err) => {
          this.status = "failed";
        })
        .finally(() => {
          setTimeout(() => {
            this.status = undefined;
          }, 1500);
        });
    },
  },
});
</script>
