<template>
  <reco-modal 
  v-on:backButtonClicked="backButtonClicked" 
  :withBackButton="true" 
  :withDoneButton="false"
  title="Forum Settings">
    <ion-content slot="content">
     <ion-list lines="none"> 
      <ion-item v-if="isMeOwner || isMeAdmin || isMine" class="loc-title-item">
        <b>Settings</b>
      </ion-item>
      <ion-item class="loc-item" style="color: #EF4141; font-weight: 500">
        <span v-if="isMeOwner || isMeAdmin || isMine" @click="deleteForumAlert()">Delete Forum</span>
      </ion-item>

      <ion-item>
        <b>Users</b>
      </ion-item>
      <ion-item class="loc-item" v-for="participant in chat.participants" :key="participant.uid">
        <ion-avatar class="loc-avatar" slot="start">
          <img :src="participant.avatar">
        </ion-avatar>
        {{ participant.name ? participant.name : participant.nickname }}
        <ion-icon v-if="(participant.name != 'deleted-user') && participant.uid != me.uid" slot="end" name="more" @click="openActionSheet(participant)"></ion-icon>
      </ion-item>
     </ion-list>

    </ion-content>
  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';

export default {
  name: 'RecoForumSettingsModal',
  components: {
    RecoModal
  },
  props: {
    me: {
      type: Object,
    },
    chat: {
      type: Object,
      default() {
        return null;
      },
    },
    isMeOwner: {
      type: Boolean,
      default: false,
    },
    isMeAdmin: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
     openActionSheet(participant) {
      const buttons = [];
      if ((this.isMeOwner || this.isMeAdmin || this.isMine) && participant.uid != this.me.uid) {
        buttons.push({
          text: 'Delete',
          role: 'destructive',
          handler: () => {
            this.deleteUserAlert(participant);
          },
        });
      }
      return this.$ionic.actionSheetController
        .create({ buttons })
        .then(a => a.present())
    },
    deleteUserAlert(participant) {
      return this.$ionic.alertController
        .create({
          header: 'Delete User',
          message: 'Are you sure you want to delete this user from the forum?',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
            },
            {
              text: 'Yes',
              handler: () => {
                this.deleteUser({ uid: participant.uid, chatId: this.chat.id, forumPostId: this.chat.postId });
              },
            },
          ],
        })
        .then(a => a.present())
    },
    deleteForumAlert() {
      return this.$ionic.alertController
        .create({
          header: 'Delete Forum',
          message: 'Are you sure you want to delete this forum?',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
            },
            {
              text: 'Yes',
              handler: () => {
                this.deleteForum({ forumId: this.chat.postId });
              },
            },
          ],
        })
        .then(a => a.present())
	  },
  }
}
</script>
<style scoped lang="css">
  .loc-title-item {
    --padding-top: 15px;
    --padding-bottom: 0px;
  }
  .loc-item {
    --padding-top: 2px;
    --padding-bottom: 10px;
  }
  .loc-avatar {
    background-color:#fff;
  }
</style>