<template>
  <main class="entry-page">
    <h1 class="settings-title">{{ $t('pages.settings.title') }}</h1>
    <ul class="settings-list">
      <li v-for="(item, i) in userTokens" class="settings-item">
        <span class="settings-item-title">{{ item.description }}</span>
        <div class="item-information">
          <div class="reveal-token">
            <div class="entry-button">
              <Button
                :data-test="`button-eye-${i}`"
                look="no-text"
                :tooltip="$t('pages.settings.setting_tooltip')"
                :icon="
                  !item.token || item.isHidden ? 'bi bi-eye' : 'bi bi-eye-slash'
                "
                @trigger="toggleToken(i)"
              />
            </div>
            <p v-if="item.token && !item.isHidden" class="token">
              {{ item.token.jwt_token }}
            </p>
            <span v-else class="token">•••••••••••••••••••••••••••••••</span>
          </div>
          <div class="entry-copy-button">
            <Button
              :data-test="`button-copy-${i}`"
              look="button--white background-white"
              :text="$t('pages.share_pictures.button_copy')"
              :icon="
                item.copied
                  ? 'bi bi-clipboard-check-fill'
                  : 'bi bi-clipboard-plus'
              "
              @trigger="copyText(i)"
            />
          </div>
        </div>
      </li>
    </ul>
  </main>
</template>

<script setup lang="ts">
import Button from '@/components/Button.vue'
import type {
  LinkInterface,
  ResponseUsersMeTokensInterface
} from './interfaces/MySettingsView'
import { updateClipboard } from '@/utils/copyToClipboard'
import { onMounted, ref } from 'vue'
import axios from 'axios'
let userTokens = ref<[ResponseUsersMeTokensInterface] | []>([])

async function toggleToken(i: number): Promise<void> {
  const relLink = userTokens.value[i].links.filter(
    (el: LinkInterface) => el.rel === 'self'
  )
  userTokens.value[i].isLoading = true
  if (!userTokens.value[i].token) {
    const { data } = await axios.get(relLink[0].href)
    userTokens.value[i].isHidden = false
    return (userTokens.value[i].token = data)
  }
  userTokens.value[i].isHidden = !userTokens.value[i].isHidden
}
async function copyText(i: number): Promise<void> {
  const relLink = userTokens.value[i].links.filter(
    (el: LinkInterface) => el.rel === 'self'
  )
  const { data } = await axios.get(relLink[0].href)
  userTokens.value[i].copied = await updateClipboard(data.jwt_token)
  setTimeout(function () {
    userTokens.value[i].copied = false
  }, 1000)
}
onMounted(async () => {
  try {
    const data = await axios.get('api/users/me/tokens')
    userTokens.value = data.data
  } catch (err) {
    console.log(err)
  }
})
</script>

<style lang="scss" scoped>
.entry-page {
  padding: toRem(5);
  min-height: calc(100vh - #{toRem(8)});
  background-color: var(--grey);
}
.settings-title {
  @include text(h1);
  color: var(--blue-dark);
  margin-bottom: toRem(4);
}
.settings-list {
  padding-left: 0;
}
.settings-item-title {
  @include text(h2);
  color: var(--blue);
}
.settings-item {
  @include text(m-r-regular);
  border: toRem(0.1) solid var(--grey);
  border-radius: toRem(1.4);
  padding: toRem(1.5);
  margin-bottom: toRem(2);
  background-color: var(--white);
}
.item-information {
  height: toRem(5);
  margin-top: toRem(1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reveal-token {
  display: flex;
  width: 80%;
}
.token {
  margin-top: toRem(0.4);
  width: 100%;
  word-wrap: break-word;
}
.entry-button {
  margin-right: toRem(1);
}

@media (max-width: toRem(102.4)) {
  .settings-item {
    position: relative;
    height: toRem(14);
  }
  .item-information {
    height: initial;
    flex-direction: column;
    align-items: flex-start;
  }
  .reveal-token {
    margin-right: toRem(2);
  }
  .entry-copy-button {
    position: absolute;
    bottom: toRem(1);
    right: toRem(1);
  }
}

@media (max-width: toRem(76.8)) {
  .entry-page {
    padding-right: toRem(2);
    padding-left: toRem(2);
    padding-top: toRem(14);
    min-height: calc(100vh - #{toRem(11)});
  }
  .settings-item {
    height: initial;
  }
  .reveal-token {
    width: 100%;
  }
  .token {
    max-width: initial;
    width: calc(100% - #{toRem(3.5)});
  }
  .entry-copy-button {
    display: none;
  }
}
</style>
