<script setup>
const {
  incomingCall,
  incomingCaller,
  selectedExtension,
  sipLoading,
  acceptIncomingCall,
  rejectIncomingCall,
} = useTelephonySoftphone()
</script>

<template>
  <Teleport to="body">
    <Transition
      enter-active-class="transition duration-200 ease-out"
      enter-from-class="-translate-y-3 opacity-0"
      enter-to-class="translate-y-0 opacity-100"
      leave-active-class="transition duration-150 ease-in"
      leave-from-class="translate-y-0 opacity-100"
      leave-to-class="-translate-y-3 opacity-0"
    >
      <div
        v-if="incomingCall"
        class="fixed inset-x-3 top-3 z-[1000] mx-auto max-w-2xl rounded-lg border border-primary-200 bg-white p-4 shadow-xl ring-1 ring-primary-100 sm:top-5"
      >
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div class="flex min-w-0 items-center gap-3">
            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 ring-8 ring-primary-100">
              <UIcon name="i-heroicons-phone-arrow-down-left" class="h-6 w-6" />
            </div>
            <div class="min-w-0">
              <p class="text-xs font-medium uppercase text-primary-600">
                Eingehender Anruf
              </p>
              <h2 class="truncate text-lg font-semibold text-gray-950">
                {{ incomingCaller }}
              </h2>
              <p class="mt-1 text-xs text-gray-500">
                Nebenstelle {{ selectedExtension }}
              </p>
            </div>
          </div>

          <div class="grid gap-2 sm:min-w-64 sm:grid-cols-2">
            <UButton
              color="success"
              icon="i-heroicons-phone"
              size="lg"
              block
              :loading="sipLoading"
              @click="acceptIncomingCall"
            >
              Annehmen
            </UButton>
            <UButton
              color="error"
              variant="soft"
              icon="i-heroicons-phone-x-mark"
              size="lg"
              block
              @click="rejectIncomingCall"
            >
              Ablehnen
            </UButton>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>
