<template>
  <div
    class="flex flex-col md:flex-row gap-2 rounded-md shadow-sm relative w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
  >
    <div class="flex flex-row gap-2 items-center">
      <TrashIcon class="w-5 h-5 min-w-5 min-h-5 cursor-pointer" @click="$emit('remove')" />
      <p
        class="flex w-full md:w-32 md:min-w-32 h-full justify-center items-center rounded-md shadow-sm relative px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
      >
        {{ selectedVehicle?.name }}
      </p>
    </div>

    <ForceSelect
      title="Fahrer"
      :ident="vehicleId + 'driver'"
      :available-forces="availableForces"
      v-model="driver"
      :enabled="enabled"
    />
    <ForceSelect
      title="Gruppenführer"
      :ident="vehicleId + 'leader'"
      :available-forces="availableForces"
      v-model="leader"
      :enabled="enabled"
    />
    <DetailFormInput
      :ident="vehicleId + 'mileage_start'"
      title="Km-Stand Start"
      v-model="mileage_start"
      type="number"
      :awareness="awareness"
      :enabled="enabled"
    />
    <DetailFormInput
      :ident="vehicleId + 'mileage_end'"
      title="Km-Stand Ende"
      v-model="mileage_end"
      type="number"
      :awareness="awareness"
      :enabled="enabled"
    />
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import * as Y from "yjs";
import { Awareness } from "@/helpers/awareness";
import { useVehicleStore } from "@/stores/admin/configuration/vehicle";
import ForceSelect from "@/components/admin/ForceSelect.vue";
import { useForceStore } from "@/stores/admin/configuration/force";
import DetailFormInput from "./DetailFormInput.vue";
import { TrashIcon } from "@heroicons/vue/24/outline";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    vehicleId: {
      type: Object as PropType<string>,
      required: true,
    },
    vehicle: {
      type: Object as PropType<Y.Map<string | number>>,
      required: true,
    },
    awareness: {
      type: Object as PropType<Awareness>,
      required: true,
    },
    enabled: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["remove"],
  computed: {
    ...mapState(useForceStore, ["availableForces"]),
    ...mapState(useVehicleStore, ["availableVehicles"]),
    selectedVehicle() {
      return this.availableVehicles.find((av) => av.id == this.vehicleId);
    },
    driver: {
      get() {
        return this.vehicle.get("driver") as string;
      },
      set(val: string) {
        this.vehicle.set("driver", val);
      },
    },
    leader: {
      get() {
        return this.vehicle.get("leader") as string;
      },
      set(val: string) {
        this.vehicle.set("leader", val);
      },
    },
    mileage_start: {
      get() {
        return this.vehicle.get("mileage_start") as string;
      },
      set(val: string) {
        this.vehicle.set("mileage_start", val);
      },
    },
    mileage_end: {
      get() {
        return this.vehicle.get("mileage_end") as string;
      },
      set(val: string) {
        this.vehicle.set("mileage_end", val);
      },
    },
  },
});
</script>
