<script setup>
// TODO: close node details tooltip when this opens
import { state } from '@/store';
import CloseActionButton from '@/components/CloseActionButton.vue';

const emit = defineEmits(['dismiss']);
const props = defineProps({
    node: {
        type: Object,
        required: false,
        validator(value) {
            return value === null || typeof value === 'object';
        },
    }
});

</script>

<template>
  <div class="relative z-sidebar" role="dialog" aria-modal="true">
    <transition
      enter-active-class="transition duration-300 ease-in-out transform"
      enter-from-class="translate-y-full"
      enter-to-class="translate-y-0"
      leave-active-class="transition duration-300 ease-in-out transform"
      leave-from-class="translate-y-0"
      leave-to-class="translate-y-full"
    >
      <div v-show="props.node !== null" class="fixed left-0 right-0 bottom-0">
        <div v-if="props.node !== null" class="mx-auto w-screen max-w-md p-4">
          <div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
            <div class="p-2">
              <div class="flex items-start justify-between">
                <div>
                  <h2 class="font-bold">
                    {{ props.node.short_name }} Neighbors
                  </h2>
                  <h3
                    v-if="state.neighborsModalType === 'weHeard'"
                    class="text-sm"
                  >
                    Nodes heard by {{ props.node.short_name }}
                  </h3>
                  <h3
                    v-if="state.neighborsModalType === 'theyHeard'"
                    class="text-sm"
                  >
                    Nodes that heard {{ props.node.short_name }}
                  </h3>
                </div>
                <CloseActionButton
                  @click="$emit('dismiss')"
                  class="my-auto ml-3"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>