<template>
  <v-list-item class="pa-0 spaceItem">
    <v-list-item-avatar
      :class="spaceItemClass"
      :href="url"
      class="my-0"
      tile>
      <v-avatar :size="avatarSize" tile>
        <v-img
          :src="avatarUrl"
          :height="avatarSize"
          :width="avatarSize"
          :max-height="avatarSize"
          :max-width="avatarSize"
          class="mx-auto spaceAvatar"
          role="presentation" />
      </v-avatar>
    </v-list-item-avatar>
    <v-list-item-content
      :class="spaceItemClass"
      :href="url"
      class="pa-0">
      <v-list-item-title>
        <a :href="url" class="text-color">
          {{ space.displayName }}
        </a>
      </v-list-item-title>
      <v-list-item-subtitle>
        <template v-if="filter === 'requests'">
          {{ $t('spacesOverview.requestToJoin.from', {0: user.fullname }) }}
        </template>
        <template v-else>
          {{ $t('spacesOverview.members', {0: space.membersCount}) }}
        </template>
      </v-list-item-subtitle>
    </v-list-item-content>
    <v-list-item-action class="ma-0 flex-row align-self-center">
      <template v-if="filter === 'requests'">
        <v-btn
          :width="actionIconSize"
          :height="actionIconSize"
          :loading="sendingAction"
          :disabled="sendingAction"
          class="me-2 spacesOverviewCheck success-color-background"
          fab
          dark
          depressed
          @click="acceptUserRequest">
          <v-icon size="18" dark>
            fa-check
          </v-icon>
        </v-btn>
        <v-btn
          :width="actionIconSize"
          :height="actionIconSize"
          :loading="sendingAction"
          :disabled="sendingAction"
          class="spacesOverviewClose error-color-background"
          fab
          dark
          depressed
          @click="refuseUserRequest">
          <v-icon size="18" dark>
            fa-times
          </v-icon>
        </v-btn>
      </template>
      <template v-if="filter === 'invited'">
        <v-btn
          :width="actionIconSize"
          :height="actionIconSize"
          :loading="sendingAction"
          :disabled="sendingAction"
          class="me-2 spacesOverviewCheck success-color-background"
          fab
          dark
          depressed
          @click="acceptToJoin">
          <v-icon size="18" dark>
            fa-check
          </v-icon>
        </v-btn>
        <v-btn
          :width="actionIconSize"
          :height="actionIconSize"
          :loading="sendingAction"
          :disabled="sendingAction"
          class="spacesOverviewClose error-color-background"
          fab
          dark
          depressed
          @click="refuseToJoin">
          <v-icon size="18" dark>
            fa-times
          </v-icon>
        </v-btn>
      </template>
      <template v-if="filter === 'manager'">
        <v-btn
          :width="actionIconSize"
          :height="actionIconSize"
          :loading="sendingAction"
          :disabled="sendingAction"
          class="spacesOverviewCheck outlined"
          icon
          fab
          dark
          depressed
          @click="$emit('edit')">
          <i class="uiIcon uiIconEdit"></i>
        </v-btn>
      </template>
      <template v-if="filter === 'pending'">
        <v-btn
          :width="actionIconSize"
          :height="actionIconSize"
          :loading="sendingAction"
          :disabled="sendingAction"
          class="spacesOverviewClose error-color-background"
          fab
          dark
          depressed
          @click="cancelRequest">
          <v-icon size="18" dark>
            fa-times
          </v-icon>
        </v-btn>
      </template>
    </v-list-item-action>
  </v-list-item>
</template>

<script>
const randomMax = 10000;
export default {
  props: {
    space: {
      type: Object,
      default: () => null,
    },
    filter: {
      type: String,
      default: () => null,
    },
    avatarSize: {
      type: Number,
      default: () => 37,
    },
  },
  data() {
    return {
      actionIconSize: 27,
      sendingAction: false,
      spaceItemClass: `spaceList${parseInt(Math.random() * randomMax)
        .toString()
        .toString()}`,
    };
  },
  computed: {
    avatarUrl() {
      return this.space && this.space.avatarUrl || `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/spaces/${this.space.prettyName}/avatar`;
    },
    user() {
      return this?.space?.pending?.[0];
    },
    url() {
      if (!this.space?.id) {
        return '#';
      }
      return `${eXo.env.portal.context}/s/${this.space.id}`;
    },
  },
  methods: {
    acceptUserRequest() {
      this.sendingAction = true;
      this.$spaceService.acceptUserRequest(this.space.id, this.user.username)
        .then(() => this.$emit('refresh', 'receivedRequests'))
        .catch((e) => {
          // eslint-disable-next-line no-console
          console.error('Error processing action', e);
        })
        .finally(() => {
          this.sendingAction = false;
        });
    },
    refuseUserRequest() {
      this.sendingAction = true;
      this.$spaceService.refuseUserRequest(this.space.id, this.user.username)
        .then(() => this.$emit('refresh', 'receivedRequests'))
        .catch((e) => {
          // eslint-disable-next-line no-console
          console.error('Error processing action', e);
        })
        .finally(() => {
          this.sendingAction = false;
        });
    },
    acceptToJoin() {
      this.sendingAction = true;
      this.$spaceService.accept(this.space.id)
        .then(() => this.$emit('refresh', 'invitations'))
        .catch((e) => {
          // eslint-disable-next-line no-console
          console.error('Error processing action', e);
        })
        .finally(() => {
          this.sendingAction = false;
        });
    },
    refuseToJoin() {
      this.sendingAction = true;
      this.$spaceService.deny(this.space.id)
        .then(() => this.$emit('refresh', 'invitations'))
        .catch((e) => {
          // eslint-disable-next-line no-console
          console.error('Error processing action', e);
        })
        .finally(() => {
          this.sendingAction = false;
        });
    },
    cancelRequest() {
      this.sendingAction = true;
      this.$spaceService.cancel(this.space.id)
        .then(() => this.$emit('refresh', 'sentRequests'))
        .catch((e) => {
          // eslint-disable-next-line no-console
          console.error('Error processing action', e);
        })
        .finally(() => {
          this.sendingAction = false;
        });
    },
  }
};
</script>
