<template>
  <div class="reservations-popup-content-container">
    <scaffolded-data :data="scaffoldedReservation" />

    <div class="actions">
      <div
        v-if="getCheckedData(reservation, ['admin', 'permission', 'update'])"
        class="edit"
        @click="editReservation"
      >
        <IconText icon="edit" size="xxs">
          {{ $_tr('edit') }}
        </IconText>
      </div>

      <template
        v-if="getCheckedData(reservation, ['admin', 'permission', 'delete'])"
      >
        <template v-if="!reservation.frequency">
          <transition name="fadeIn" mode="out-in">
            <div
              v-if="!showDeleteConfirmation"
              :key="showDeleteConfirmation"
              class="delete"
              @click="showDeleteConfirmation = true"
            >
              <IconText icon="trash" size="xxs">
                {{ $_tr('delete') }}
              </IconText>
            </div>

            <div v-else :key="showDeleteConfirmation" class="delete-action">
              <Icon icon="trash" size="xxs" />

              <button class="btn-add" @click="deleteReservation">
                <Icon icon="check" size="xxs" color="white" />
              </button>

              <button
                class="btn-delete"
                @click="showDeleteConfirmation = false"
              >
                <Icon icon="close" size="xxs" color="white" />
              </button>
            </div>
          </transition>
        </template>

        <div v-else class="delete" @click="triggerRecurrenceDelete">
          <IconText icon="trash" size="xxs">
            {{ $_tr('delete') }}
          </IconText>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { markRaw } from 'vue'

import ReservationsFrequenciesMixin from '../../inside-customs/mixins/reservations-frequencies-mixin'
import ScaffoldMixin from '@inside-library/components/commons/mixins/scaffold-mixin'

import AvatarUsernameUsers from '@inside-users/displays/AvatarUsernameUsers'
import ReservationsPopupContent from '@inside-agenda/components/lib/sub-components/calendar/ReservationsPopupContent'

import { IconText, Icon, BaseText, Title } from 'inside-collection/atoms'

export default {
  name: 'reservations-popup-content',
  components: {
    AvatarUsernameUsers,
    Icon,
    IconText,
    BaseText,
    Title
  },
  extends: ReservationsPopupContent,
  mixins: [ReservationsFrequenciesMixin, ScaffoldMixin],
  computed: {
    scaffoldedReservation() {
      return [
        // title
        {
          tag: markRaw(Title),
          data: { tag: 'h5' },
          class: 'title',
          value: this.reservation.title
        },
        // description
        ...this.$_insertIf(this.reservation.reservation_description, {
          tag: markRaw(BaseText),
          class: 'description',
          value: this.reservation.reservation_description
        }),
        // room cleaning time - cooldown
        ...this.$_insertIf(this.reservation.cooldown, {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('cooldown')}:</span> ${
            this.reservation.cooldown
          } ${this.$_tr('minutes')}`,
          html: true
        }),
        // reservation for
        {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('organizer')}:</span> ${this.$_username(
            this.reservation.organizer
          )}`,
          html: true
        },
        // created by
        ...this.$_insertIf(
          this.isAlive(this.reservation, ['authors', 'uuid']),
          {
            tag: markRaw(BaseText),
            value: `<span>${this.$_tr('author')}:</span> ${this.$_username(
              this.reservation.authors
            )}`,
            html: true
          }
        ),
        // WHEN section
        {
          tag: markRaw(Title),
          data: { tag: 'h5' },
          class: 'section-title',
          value: this.$_tr('when')
        },
        // start
        {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('start')}:</span> ${this.$_formatDate(
            this.reservation.start_date,
            'LLLL'
          )} ${this.$_formatDate(this.reservation.start_date, 'LT')}`,
          html: true
        },
        // end
        {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('end')}:</span> ${this.$_formatDate(
            this.reservation.end_date,
            'LLLL'
          )} ${this.$_formatDate(this.reservation.end_date, 'LT')}`,
          html: true
        },
        // frequency
        {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('frequency')}:</span> ${this.$_tr(
            this.currentFrequency(
              this.parseFrequency(this.reservation.frequency)
            )
          )}`,
          html: true
        },
        // WHO section
        {
          tag: markRaw(Title),
          data: { tag: 'h5' },
          class: 'section-title',
          value: this.$_tr('who')
        },
        // number of guests
        {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('seats')}:</span> ${
            this.reservation.seats || '0'
          }`,
          html: true
        },
        // internal
        ...this.$_insertIf(
          this.getCheckedData(
            this.reservation,
            ['internal_users', 'data', 0],
            null
          ),
          {
            tag: markRaw(BaseText),
            value: `<span>${this.$_tr(
              'internal_users'
            )}:</span> ${this.internalUsers(
              this.reservation.internal_users.data
            )}`,
            html: true
          }
        ),
        // external_users
        ...this.$_insertIf(
          this.getCheckedData(this.reservation, 'external_users'),
          {
            tag: markRaw(BaseText),
            value: `<span>${this.$_tr('external_users')}:</span> ${
              this.reservation.external_users
            }`,
            html: true
          }
        ),
        // internal_comment
        ...this.$_insertIf(
          this.getCheckedData(this.reservation, 'internal_comment'),
          {
            tag: markRaw(BaseText),
            value: `<span>${this.$_tr('internal_comment')}:</span> ${
              this.reservation.internal_comment
            }`,
            html: true
          }
        ),
        // WHAT section
        ...this.$_insertIf(this.whatSection, {
          tag: markRaw(Title),
          data: { tag: 'h5' },
          class: 'section-title',
          value: this.$_tr('what')
        }),
        // it
        ...this.$_insertIf(
          this.getCheckedData(
            this.reservation,
            ['information_technologies', 'data', 0],
            null
          ),
          {
            tag: markRaw(BaseText),
            value: `<span>${this.$_tr('it')}:</span> ${this.roomServices(
              this.getCheckedData(
                this.reservation,
                ['information_technologies', 'data'],
                []
              )
            )}`,
            html: true
          }
        ),
        // catering
        ...this.$_insertIf(
          this.getCheckedData(
            this.reservation,
            ['catering_services', 'data', 0],
            null
          ),
          {
            tag: markRaw(BaseText),
            value: `<span>${this.$_tr('catering')}:</span> ${this.roomServices(
              this.getCheckedData(
                this.reservation,
                ['catering_services', 'data'],
                []
              )
            )}`,
            html: true
          }
        ),
        // WHERE section
        {
          tag: markRaw(Title),
          data: { tag: 'h5' },
          class: 'section-title',
          value: this.$_tr('where')
        },
        // room
        {
          tag: markRaw(BaseText),
          value: `<span>${this.$_tr('room')}:</span> ${
            this.reservation.rooms.title
          }`,
          html: true
        }
      ]
    },
    whatSection() {
      return (
        this.getCheckedData(
          this.reservation,
          ['information_technologies', 'data', 0],
          null
        ) ||
        this.getCheckedData(
          this.reservation,
          ['catering_services', 'data', 0],
          null
        )
      )
    }
  },
  methods: {
    internalUsers(users) {
      if (users && users.length > 0) {
        return users
          .map(user => {
            return this.$_username(user)
          })
          .join(', ')
      }

      return null
    },
    roomServices(services = []) {
      return services.map(({ title }) => title).join(', ')
    },
    editReservation() {
      this.setStoreAction(
        'setSelectedEventCalendarStartDate',
        this.reservation.start_date.toString()
      )

      this.triggerModal(
        'reservations-form',
        'fetch',
        {
          item: this.reservation,
          content: this.$_reservationContentType,
          filters: {
            date: this.$_formatDate(this.reservation.start_date, 'YYYY-MM-DD'),
            uuid: this.reservation.uuid
          }
        },
        {
          layout: 'right',
          size: 'm',
          transition: 'fadeInLeft'
        }
      )
    }
  }
}
</script>

<style lang="scss">
div.reservations-popup-content-container {
  width: 456px;
  max-width: 100%;

  .section-title {
    margin-top: var(--spacing-s);
  }

  p span {
    font-weight: var(--font-weight-bold);
  }
}
</style>
