<template>
  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width>
    <q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h4">{{ props.chat!.displayName }}</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <div class="grid-container">
        <q-card-section>
          <div class="text-h5">Mitglieder</div>
          <table>
            <tr v-for="user in props.chat!.members">
              <td>
                <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
              </td>
              <td v-if="user.id != userStore.user!.id">
                <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen"></q-btn>
                <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
              </td>
            </tr>
          </table>
        </q-card-section>

        <!-- Namen des Chats ändern -->
        <q-card-section>
          <div class="text-h5">Namen ändern</div>
          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter />
        </q-card-section>

        <q-card-section>
          <div class="text-h5">Aktionen</div>
          <q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
          <q-btn class="deleteButton">Grupepnchat löschen</q-btn>
        </q-card-section>

        <q-card-section>
          <div class="text-h5">Gruppenbild ändern</div>

          <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
            <div
              v-for="(image, index) in chatStore.profilePictures"
              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepicture ? 'dashed grey' : 'none'}"
              style="color: red;"
              round
              flat
              outline
              class="profilePictureSelector"
              @click="selectProfilePicture(image)"
            >
            </div>
          </div>
          <div v-else>
            <q-spinner
              color="primary"
              size="3em"
            />
          </div>
        </q-card-section>
      </div>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import ProfileCardComponent from './ProfileCardComponent.vue';
import { useUserStore } from 'src/stores/user-store';
import { profilePicture } from 'src/models';
import { useChatStore } from 'src/stores/chat-store';

  const showDialog = ref(true);
  const userStore = useUserStore();
  const chatStore = useChatStore();

  const emit = defineEmits(['update:showDialog', 'showModal']);
  const props = defineProps({
    showDialog: Boolean,
    chat: Object
  });

  const internalShowDialog = computed({
      get: () => props.showDialog,
      set: (value) => emit('update:showDialog', value)
  });

  const closeDialog = () => {
    emit('showModal', true);
  }

  const selectProfilePicture = (image: profilePicture) => {
    props.chat!.profilepicture = image.url;
  }
</script>

<style scoped>
  .deleteButton {
    color:darkred;
    border:2px solid darkred;
    border-radius: 6px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
  }

  .grid-container > div:nth-child(odd) {
    margin-right: 50px;
    min-width: 30vw;
  }

  .profilePictureSelector {
    transition: .3s;
    background-size: cover;
    background-position:center;
    width: 6rem;
    height:6rem;
    margin: 15px;
    border-radius: 100%;
    cursor: pointer;
  }

  .profilePictureSelector:hover {
    transition: .3s;
    filter: brightness(0.6);
  }
</style>