<template>
  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
    <div class="bubble">
      <div class="message">
        <v-container fluid class="imageCollection">
          <v-row wrap>
            <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
              <v-img :aspect-ratio="16 / 9" :src="item.src" cover />
            </v-col>
          </v-row>
        </v-container>
        <i v-if="event.isRedacted()" class="deleted-text">
          <v-icon :color="this.senderIsAdminOrModerator(this.event) ? 'white' : ''" size="small">block</v-icon>
          {{ $t('message.incoming_message_deleted_text') }}
        </i>
        <span v-html="linkify($sanitize(messageText))" v-else />
        <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
          {{ $t('message.edited') }}
        </span>
      </div>
    </div>
  </message-incoming>
</template>

<script>
import MessageIncoming from "./MessageIncoming.vue";
import messageMixin from "./messageMixin";
import util from "../../plugins/utils";

export default {
  extends: MessageIncoming,
  components: { MessageIncoming },
  mixins: [messageMixin],
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId()).map(e => {
      let ret = {
        event: e,
        src: null,
      };
      ret.promise =
        util
          .getThumbnail(this.$matrix.matrixClient, e, 100, 100)
          .then((url) => {
            ret.src = url;
          })
          .catch((err) => {
            console.log("Failed to fetch thumbnail: ", err);
          });
      return ret;
    })
  },
  methods: {
    layoutedItems() {
      if (!this.items || this.items.length == 0) { return [] }
      let array = this.items.slice(0);
      let rows = []
      while (array.length > 0) {
        if (array.length >= 7) {
          rows.push({ size: 6, item: array[0] });
          rows.push({ size: 6, item: array[1] });
          rows.push({ size: 12, item: array[2] });
          rows.push({ size: 3, item: array[3] });
          rows.push({ size: 3, item: array[4] });
          rows.push({ size: 3, item: array[5] });
          rows.push({ size: 3, item: array[6] });
          array = array.slice(7);
        } else if (array.length >= 3) {
          rows.push({ size: 6, item: array[0] });
          rows.push({ size: 6, item: array[1] });
          rows.push({ size: 12, item: array[2] });
          array = array.slice(3);
        } else if (array.length >= 2) {
          rows.push({ size: 6, item: array[0] });
          rows.push({ size: 6, item: array[1] });
          array = array.slice(2);
        } else {
          rows.push({ size: 12, item: array[0] });
          array = array.slice(1);
        }
      }
      return rows
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

<style lang="scss" scoped>

.bubble {
  width: 100%;
}

.imageCollection {
  border-radius: 15px;
  padding: 0;
  overflow: hidden;
  .row {
    margin: -4px; // Compensate for column padding, so the border-radius above looks round!
    padding: 0;
  }
  .col {
    padding: 2px;
  }
}
</style>