<template>
  <v-dialog :modelValue="showLogoutPopup" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
    scroll-strategy="none"
    @click:outside="$emit('onOutsideLogoutPopupClicked')">
    <div class="dialog-content text-center">
      <h2 class="dialog-title">{{ $t("logout.confirm_text") }}</h2>
      <div class="dialog-text">{{ $t("logout.copy_credentials_desc") }}</div>
      <v-row>
        <v-col sm="12" md="6" offset-md="3" class="d-flex justify-center">
          <v-btn
            ref="copyCredentialsBtn"
            :color="credentialsCopied ? '#DEE6FF' : 'grey-lighten-4'"
            class="text-none mb-2	mt-2 pa-5 d-flex justify-space-between"
            append-icon="$vuetify.icons.ic_copy"
            @click.stop="onCopyCredentials">
            {{ $t(`logout.${credentialsCopied?'copied':'copy'}_credentials`)}}
            <template v-slot:append>
              <v-icon color="black"></v-icon>
            </template>
          </v-btn>
        </v-col>
      </v-row>
      <v-container fluid>
        <v-row cols="12">
          <v-col cols="6">
            <v-btn variant="flat" block class="text-button" @click.stop="$emit('onCancelLogoutClicked')">{{
              $t("menu.cancel") }}</v-btn>
          </v-col>
          <v-col cols="6" align="center">
            <v-btn color="red" variant="flat" block class="filled-button" @click.stop="logout">{{ $t("menu.logout")
            }}</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-dialog>
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import { mapState } from 'vuex'

export default {
  name: "LogoutRoomDialog",
  mixins: [profileInfoMixin],
  props: {
    showLogoutPopup: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      credentialsCopied: false
    }
  },
  computed: {
    ...mapState([
      'auth'
    ]),
    credentials() {
      return this.$t(`logout.copied_credentials_value`, { userId: this.auth.user.user_id, password: this.auth.user.password})
    }
  },
  methods: {
    onCopyCredentials() {
      if(this.credentialsCopied) return
      const self = this;
      this.$copyText(this.credentials, this.$refs.copyCredentialsBtn.$el).then(
        function (ignored) {
          self.credentialsCopied = true;
          setInterval(() => {
            self.credentialsCopied = false;
          }, 3000);
        },
        function (e) {
          console.log(e);
        }
      )
    }
  }
};
</script>
