<template>
  <q-card
    bordered
    :class="isPast(reservation.end) ? 'text-blue-grey-6' : ''"
    class="q-ma-md">
    <q-card-section>
      <div class="row items-center no-wrap">
        <div class="col">
          <div class="text-h6">
            {{ boatStore.getBoatById(reservation.resource)?.name }}
          </div>
          <div class="text-subtitle2">
            <p>
              Start: {{ formatDate(reservation.start) }}
              <br />
              End: {{ formatDate(reservation.end) }}
              <br />
              Type: {{ reservation.reason }}
            </p>
          </div>
        </div>
        <!-- <div class="col-auto">
            <q-btn
              color="grey-7"
              round
              flat
              icon="more_vert">
              <q-menu
                cover
                auto-close>
                <q-list>
                  <q-item clickable>
                    <q-item-section>remove card</q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section>send feedback</q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section>share</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div> -->
      </div>
    </q-card-section>

    <!-- <q-card-section>Some more information here...</q-card-section> -->

    <q-separator />

    <q-card-actions v-if="!isPast(reservation.end)">
      <q-btn
        flat
        size="lg"
        :to="{ name: 'edit-reservation', params: { id: reservation.$id } }">
        Modify
      </q-btn>
      <q-btn
        flat
        size="lg"
        @click="cancelReservation()">
        Delete
      </q-btn>
    </q-card-actions>
  </q-card>
  <q-dialog v-model="cancelDialog">
    <q-card>
      <q-card-section class="row items-center">
        <q-avatar
          icon="warning"
          color="negative"
          text-color="white" />
        <span class="q-ml-md">Warning!</span>
        <p class="q-pt-md">
          This will delete your reservation for
          {{ boatStore.getBoatById(reservation?.resource)?.name }} on
          {{ formatDate(reservation?.start) }}
        </p>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          flat
          size="lg"
          label="Cancel"
          color="primary"
          v-close-popup />
        <q-btn
          flat
          size="lg"
          label="Delete"
          color="negative"
          @click="reservationStore.deleteReservation(reservation)"
          v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { useBoatStore } from 'src/stores/boat';
import { useReservationStore } from 'src/stores/reservation';
import type { Reservation } from 'src/stores/schedule.types';
import { formatDate, isPast } from 'src/utils/schedule';
import { ref } from 'vue';

const cancelDialog = ref(false);
const boatStore = useBoatStore();
const reservationStore = useReservationStore();

const reservation = defineModel<Reservation>({ required: true });

const cancelReservation = () => {
  cancelDialog.value = true;
};
</script>
