<template>
  <div class="q-pa-md row q-gutter-sm">
    <q-card
      flat
      bordered
      class="col-md-4 col-sm-8 col-xs-12">
      <q-card-section>
        <div class="text-h5 q-mt-none q-mb-xs">New Booking</div>
        <div class="text-caption text-grey-8">for: {{ bookingForm.name }}</div>
      </q-card-section>
      <q-separator />
      <q-item
        clickable
        @click="boatSelect = true">
        <q-item-section avatar>
          <q-icon
            color="primary"
            name="event" />
        </q-item-section>
        <q-item-section>
          <q-card v-if="bookingForm.boat">
            <q-card-section>
              <q-img
                :src="bookingForm.boat?.imgSrc"
                :fit="'scale-down'">
                <div class="row absolute-top">
                  <div class="col text-h6 text-left">
                    {{ bookingForm.boat?.name }}
                  </div>
                  <div class="col text-right">
                    {{ bookingForm.boat?.class }}
                  </div>
                </div>
              </q-img>
            </q-card-section>
            <q-separator />
            <q-card-section class="q-py-none">
              <q-list
                dense
                class="row">
                <q-item>
                  <q-item-section avatar>
                    <q-badge
                      outline
                      color="primary"
                      label="Start" />
                  </q-item-section>
                  <q-item-section>
                    {{
                      date.formatDate(
                        new Date(bookingForm.startDate as string),
                        'ddd MMM Do @ hh:mm A'
                      )
                    }}
                  </q-item-section>
                </q-item>
                <q-item class="q-ma-none">
                  <q-item-section avatar>
                    <q-badge
                      outline
                      color="primary"
                      label="End" />
                  </q-item-section>
                  <q-item-section>
                    {{
                      date.formatDate(
                        new Date(bookingForm.endDate as string),
                        'ddd MMM Do @ hh:mm A'
                      )
                    }}
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
          <div v-else>Tap to Select a Boat / Time</div>
        </q-item-section>
      </q-item>
      <q-list dense>
        <q-item>
          <q-item-section avatar>
            <q-icon
              color="primary"
              name="category" />
          </q-item-section>
          <q-item-section>
            <q-select
              filled
              v-model="bookingForm.reason"
              :options="reason_options"
              label="Reason for sail" />
          </q-item-section>
        </q-item>
      </q-list>
      <q-card-actions align="right">
        <q-btn
          label="Reset"
          @click="onReset"
          color="secondary"
          size="md" />
        <q-btn
          label="Submit"
          @click="onSubmit"
          color="primary" />
      </q-card-actions>
    </q-card>
    <q-dialog
      v-model="boatSelect"
      full-width>
      <BoatScheduleTableComponent v-model="interval" />
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useAuthStore } from 'src/stores/auth';
import { Boat, useBoatStore } from 'src/stores/boat';
import { date, useQuasar } from 'quasar';
import { Interval, Reservation } from 'src/stores/schedule.types';
import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
import { getNewId } from 'src/utils/misc';
import { useRouter } from 'vue-router';
import { useReservationStore } from 'src/stores/reservation';

interface BookingForm {
  bookingId: string;
  name?: string;
  boat?: Boat;
  startDate?: string;
  endDate?: string;
  reason: string;
  members: { name: string }[];
  guests: { name: string }[];
}

const reason_options = ['Open Sail', 'Private Sail', 'Racing', 'Other'];

const auth = useAuthStore();
const interval = ref<Interval>();
const newForm = {
  bookingId: getNewId(),
  name: auth.currentUser?.name,
  boat: <Boat | undefined>undefined,
  startDate: '',
  endDate: '',
  reason: 'Open Sail',
  members: [],
  guests: [],
};
const bookingForm = ref<BookingForm>({ ...newForm });
const router = useRouter();
const reservationStore = useReservationStore();
const $q = useQuasar();
const boatSelect = ref(false);

watch(interval, (new_interval) => {
  bookingForm.value.boat = useBoatStore().boats.find(
    (b) => b.$id === new_interval?.boatId
  );
  bookingForm.value.startDate = new_interval?.start;
  bookingForm.value.endDate = new_interval?.end;
});

const onReset = () => {
  bookingForm.value = { ...newForm };
};
const onSubmit = () => {
  const booking = bookingForm.value;
  if (
    !(booking.boat && booking.startDate && booking.endDate && auth.currentUser)
  ) {
    // TODO: Make a proper validator
    return;
  }
  const reservation = <Reservation>{
    resource: booking.boat.$id,
    start: booking.startDate,
    end: booking.endDate,
    user: auth.currentUser.$id,
    status: 'confirmed',
    reason: booking.reason,
  };
  console.log(reservation);
  // TODO: Fix this.  It will always look successful
  reservationStore.createReservation(reservation); // Probably should pass the notify as a callback to the reservation creation.
  $q.notify({
    color: 'green-4',
    textColor: 'white',
    icon: 'cloud_done',
    message: 'Submitted',
  });
  router.go(-1);
};
</script>
