<template>
  <div>
    <v-list density="compact">
      <v-list-item>
        <template #prepend>
          <v-icon>mdi-tag</v-icon>
        </template>
        <v-list-item-title>Código</v-list-item-title>
        <v-list-item-subtitle>
          <code class="order-code">{{ code }}</code>
        </v-list-item-subtitle>
        <template #append>
          <v-btn
            data-test="copy-code"
            icon="mdi-content-copy"
            size="small"
            title="Copiar código"
            variant="text"
            @click="copyText(code)"
          />
        </template>
      </v-list-item>
      <v-list-item>
        <template #prepend>
          <v-icon>mdi-link-variant</v-icon>
        </template>
        <v-list-item-title>Link de consulta</v-list-item-title>
        <v-list-item-subtitle>
          <code class="order-link">{{ publicLink }}</code>
        </v-list-item-subtitle>
        <template #append>
          <v-btn
            data-test="copy-link"
            icon="mdi-content-copy"
            size="small"
            title="Copiar link"
            variant="text"
            @click="copyText(publicLink)"
          />
        </template>
      </v-list-item>
    </v-list>

    <v-snackbar v-model="snackbar" color="success" location="top" :timeout="2000">
      Copiado
    </v-snackbar>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'

  const props = defineProps({
    code: {
      type: String,
      required: true,
    },
  })

  const snackbar = ref(false)

  const publicLink = computed(() => {
    return `${window.location.origin}/pedido/${props.code}`
  })

  async function copyText (text) {
    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(text)
    }
    snackbar.value = true
  }
</script>

<style scoped>
.order-code,
.order-link {
  word-break: break-all;
}
</style>
