<template>
  <global-form
    form-id="reservation-modal-form"
    http-verb="put"
    :endpoint="endpoint"
    :reset-on-success="false"
    :use-submit-slot="canEdit"
    class="reservation-modal-form-container"
    @onRequestSuccess="onRequestSuccess"
  >
    <template #fields>
      <input-textarea
        form-id="reservation-modal-form"
        model-name="internal_comment"
        :default-value="comment"
        :label="$_tr('labels.comment')"
        :readonly="!canEdit"
      />

      <input-hidden
        form-id="reservation-modal-form"
        model-name="rooms"
        :default-value="room"
        :rules="['required']"
      />

      <input-hidden
        v-if="!frequency"
        form-id="reservation-modal-form"
        model-name="start_date"
        :default-value="start"
        :rules="['required']"
      />

      <input-hidden
        v-if="!frequency"
        form-id="reservation-modal-form"
        model-name="end_date"
        :default-value="end"
        :rules="['required']"
      />

      <input-hidden
        form-id="reservation-modal-form"
        model-name="type"
        default-value="node"
        :rules="['required']"
      />

      <input-hidden
        form-id="reservation-modal-form"
        model-name="author"
        :default-value="author"
        :rules="['required']"
      />

      <input-hidden
        form-id="reservation-modal-form"
        model-name="date"
        :default-value="frequency ? date : null"
      />

      <input-hidden
        form-id="reservation-modal-form"
        model-name="bundle"
        default-value="rooms_reservations"
        :rules="['required']"
      />
    </template>
  </global-form>
</template>

<script>
import moment from 'moment'

import RefreshListingMixin from '@inside-listings/mixins/refresh-listing-mixin'

export default {
  name: 'ReservationModalForm',
  $_i18nRootPath: 'customs.RESERVATIONS.MODAL.FORM',
  mixins: [RefreshListingMixin],
  props: {
    admin: {
      type: Object,
      required: true
    },
    author: {
      type: Object,
      required: true
    },
    uuid: {
      type: String,
      required: true
    },
    comment: {
      type: String
    },
    startDate: {
      type: Number,
      required: true
    },
    endDate: {
      type: Number,
      required: true
    },
    room: {
      type: String,
      required: true
    },
    listingId: {
      type: String,
      required: true
    },
    date: {
      type: String,
      required: true
    },
    frequency: {
      type: String
    }
  },
  computed: {
    endpoint() {
      return `content/rooms_reservations/${this.uuid}`
    },
    start() {
      return this.utc(this.startDate * 1000)
    },
    end() {
      return this.utc(this.endDate * 1000)
    },
    canEdit() {
      const now = moment().utc()
      const reservationStartDate = moment.utc(this.startDate * 1000)
      const listingDate = moment(this.heritedOptions.date)

      if (this.getCheckedData(this.admin, ['permission', 'update'])) {
        if (listingDate.isSame(now, 'day')) {
          if (this.timeOfDay(now) < this.timeOfDay(reservationStartDate)) {
            // before reservation start
            return true
          }
        } else {
          // different day
          if (listingDate.isAfter(now)) {
            // after today
            return true
          }
        }
      }

      return false
    }
  },
  methods: {
    onRequestSuccess() {
      this.$_refresh(this.listingId)
      this.closeModal(this.heritedOptions.modalName)
    },
    utc(value) {
      const date = moment(value)

      return date.isValid()
        ? moment.utc(date).format('YYYY-MM-DD HH:mm:ss')
        : null
    },
    timeOfDay(m) {
      return m.minutes() + m.hours() * 60
    }
  }
}
</script>

<style lang="scss">
.reservation-modal-form-container {
  .global-form {
    &__fields {
      .readiness {
        &.todo {
          color: var(--color-warn);
        }

        &.ready {
          color: var(--color-valid);
        }
      }
    }
  }
}
</style>
