<script>
import moment from 'moment'
import { markRaw } from 'vue'

import ReservationsFrequenciesMixin from '../../mixins/reservations-frequencies-mixin'
import DefaultModal from '@inside-modals/default/DefaultModal'
import AvatarUsernameUsers from '@inside-users/displays/AvatarUsernameUsers'
import ReservationModalForm from './sub-components/ReservationModalForm'

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'reservation-modal',
  $_i18nRootPath: 'customs.RESERVATIONS.MODAL',
  components: {
    AvatarUsernameUsers,
    ReservationModalForm,
    BaseText
  },
  extends: DefaultModal,
  mixins: [ReservationsFrequenciesMixin],
  data() {
    return {
      selection: {
        title: 'title',
        room: 'rooms',
        description: 'reservation_description',
        cooldown: 'cooldown',
        organizer: 'organizer',
        author: 'authors',
        startDate: 'start_date',
        endDate: 'end_date',
        guests: 'seats',
        internal: 'internal_users.data',
        external: 'external_users',
        informationTechnologies: 'information_technologies.data',
        cateringServices: 'catering_services.data',
        uuid: 'uuid',
        admin: 'admin',
        comment: 'internal_comment',
        frequency: 'frequency'
      }
    }
  },
  methods: {
    internalUsers(users) {
      return users.map(user => {
        return {
          tag: markRaw(AvatarUsernameUsers),
          data: { user }
        }
      })
    },
    scaffold(fields) {
      return {
        title: fields.title,
        sections: [
          {
            fields: [
              {
                label: this.$_tr('room'),
                value: fields.room.title
              },
              {
                label: this.$_tr('description'),
                value: fields.description
              },
              {
                label: this.$_tr('cooldown'),
                value: fields.cooldown
              },
              {
                label: this.$_tr('organizer'),
                tag: markRaw(AvatarUsernameUsers),
                data: { user: fields.organizer }
              },
              {
                label: this.$_tr('author'),
                tag: markRaw(AvatarUsernameUsers),
                data: { user: fields.author }
              },
              {
                label: this.$_tr('start'),
                value: `${this.$_formatDate(
                  moment(this.heritedOptions.date).format('X'),
                  'LLLL'
                )} ${this.$_formatDate(fields.startDate, 'LT')}`,
                html: true
              },
              {
                label: this.$_tr('end'),
                value: `${this.$_formatDate(
                  moment(this.heritedOptions.date).format('X'),
                  'LLLL'
                )} ${this.$_formatDate(fields.endDate, 'LT')}`,
                html: true
              },
              // frequency
              {
                label: this.$_tr('frequency'),
                tag: 'p',
                value: this.$_tr(
                  this.currentFrequency(this.parseFrequency(fields.frequency))
                )
              },
              {
                label: this.$_tr('guests'),
                value: fields.guests
              },
              ...this.insertIf(fields.internal.length, {
                label: this.$_tr('internal'),
                children: this.internalUsers(fields.internal)
              }),
              ...this.insertIf(fields.external, {
                label: this.$_tr('external'),
                value: fields.external
              }),
              ...this.insertIf(fields.informationTechnologies.length, {
                label: this.$_tr('it'),
                children: fields.informationTechnologies.map(it => {
                  return {
                    tag: markRaw(BaseText),
                    value: `- ${it.title}`
                  }
                })
              }),
              ...this.insertIf(fields.cateringServices.length, {
                label: this.$_tr('catering'),
                children: fields.cateringServices.map(catering => {
                  return {
                    tag: markRaw(BaseText),
                    value: `- ${catering.title}`
                  }
                })
              })
            ]
          },
          {
            fields: [
              {
                tag: markRaw(ReservationModalForm),
                data: {
                  date: this.getCheckedData(this.heritedOptions, 'date'),
                  admin: fields.admin,
                  author: fields.author,
                  uuid: fields.uuid,
                  comment: fields.comment,
                  startDate: fields.startDate,
                  endDate: fields.endDate,
                  room: fields.room.uuid,
                  listingId: this.heritedOptions.listingId,
                  heritedOptions: this.heritedOptions,
                  frequency: fields.frequency
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
