<template>
  <div class="modal-actions-container">
    <span class="close" @click="closeAgendaModal">{{ $_tr('close') }}</span>

    <div class="btn" @click="makeReservation">
      {{ $_tr('makeReservation') }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'agenda-modal-actions-customs',
  $_i18nRootPath: 'agenda.MODAL',
  computed: {
    startDate() {
      const startDate = this.getStore('getSelectedDate')
      const now = new Date()

      if (startDate) {
        startDate.setHours(now.getHours(), now.getMinutes(), 0)

        return startDate
      }

      return now
    }
  },
  methods: {
    closeAgendaModal() {
      this.closeModal(this.heritedOptions.modalName)
    },
    makeReservation() {
      this.triggerModal(
        'reservations-form',
        'static',
        {
          item: {
            reservationContentType: this.getStore('getReservationContentType'),
            parentData: { uuid: this.heritedData.uuid },
            start: this.startDate
          }
        },
        {
          layout: 'right',
          width: '40%',
          transition: 'fadeInLeft'
        }
      )

      this.closeAgendaModal()
    }
  }
}
</script>

<style lang="scss">
.modal-actions-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .close {
    margin-right: calc(var(--spacing-xs) + var(--spacing-m));
    color: var(--color-text);
    cursor: pointer;

    @include transition(0.3s);

    &:hover {
      color: var(--color-primary);
    }
  }
}
</style>
