<template>
  <div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
    <!-- Action Buttons -->
    <span v-if="isRegistered" class="flex">
      <router-link
        :to="{ name: 'invite-one' }"
        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      >
        <font-awesome icon="envelope-open-text" class="fa-fw text-2xl" />
      </router-link>

      <button
        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
        @click="$emit('show-onboard-meeting')"
      >
        <font-awesome icon="chair" class="fa-fw text-2xl" />
      </button>
    </span>
    <span v-else class="flex">
      <span
        class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      >
        <font-awesome
          icon="envelope-open-text"
          class="fa-fw text-2xl"
          @click="$emit('registration-required')"
        />
      </span>
      <span
        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      >
        <font-awesome
          icon="chair"
          class="fa-fw text-2xl"
          @click="$emit('navigate-onboard-meeting')"
        />
      </span>
    </span>

    <!-- QR Code Button -->
    <button
      class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      @click="$emit('qr-scan')"
    >
      <font-awesome icon="qrcode" class="fa-fw text-2xl" />
    </button>

    <!-- Contact Input -->
    <textarea
      v-model="inputValue"
      type="text"
      placeholder="New URL or DID, Name, Public Key, Next Public Key Hash"
      class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
    />

    <!-- Add Button -->
    <button
      class="px-4 rounded-r bg-green-200 border border-green-400"
      @click="$emit('submit', inputValue)"
    >
      <font-awesome icon="plus" class="fa-fw" />
    </button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";

/**
 * ContactInputForm - Contact input form component
 *
 * Provides a form for adding new contacts with various input formats.
 * Includes action buttons for invites, meetings, and QR scanning.
 *
 * @author Matthew Raymer
 */
@Component({
  name: "ContactInputForm",
  emits: [
    "submit",
    "show-onboard-meeting",
    "registration-required",
    "navigate-onboard-meeting",
    "qr-scan",
    "update:modelValue",
  ],
})
export default class ContactInputForm extends Vue {
  @Prop({ required: true }) isRegistered!: boolean;

  @Prop({ type: String, default: "" }) modelValue!: string;

  /**
   * Computed property for v-model binding
   */
  get inputValue(): string {
    return this.modelValue;
  }

  set inputValue(value: string) {
    this.$emit("update:modelValue", value);
  }
}
</script>
