<template>
  <div class="flex justify-between">
    <!-- Left side - Bulk selection controls -->
    <div class="">
      <div v-if="!showGiveNumbers" class="flex items-center">
        <input
          type="checkbox"
          :checked="allContactsSelected"
          class="align-middle ml-2 h-6 w-6"
          data-testId="contactCheckAllTop"
          @click="emitToggleAllSelection"
        />
        <button
          v-if="!showGiveNumbers"
          :class="copyButtonClass"
          :disabled="copyButtonDisabled"
          data-testId="copySelectedContactsButtonTop"
          @click="emitCopySelected"
        >
          Copy
        </button>
        <font-awesome
          icon="circle-info"
          class="text-2xl text-blue-500 ml-2"
          @click="emitShowCopyInfo"
        />
      </div>
    </div>

    <!-- Right side - Action buttons -->
    <div class="flex items-center gap-2">
      <button
        v-if="showGiveNumbers"
        class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
        :class="giveAmountsButtonClass"
        @click="emitToggleGiveTotals"
      >
        {{ giveAmountsButtonText }}
        <font-awesome icon="left-right" class="fa-fw" />
      </button>

      <button
        class="text-md 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-3 py-1.5 rounded-md"
        @click="emitToggleShowActions"
      >
        {{ showActionsButtonText }}
      </button>
    </div>
  </div>
</template>

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

/**
 * ContactListHeader - Contact list header component
 *
 * Provides bulk selection controls and action buttons for the contact list.
 * Handles copy operations and give amounts display toggles.
 *
 * @author Matthew Raymer
 */
@Component({
  name: "ContactListHeader",
})
export default class ContactListHeader extends Vue {
  @Prop({ required: true }) showGiveNumbers!: boolean;
  @Prop({ required: true }) allContactsSelected!: boolean;
  @Prop({ required: true }) copyButtonClass!: string;
  @Prop({ required: true }) copyButtonDisabled!: boolean;
  @Prop({ required: true }) giveAmountsButtonText!: string;
  @Prop({ required: true }) showActionsButtonText!: string;
  @Prop({ required: true }) giveAmountsButtonClass!: Record<string, boolean>;

  // Emit methods using @Emit decorator
  @Emit("toggle-all-selection")
  emitToggleAllSelection() {
    // No parameters needed
  }

  @Emit("copy-selected")
  emitCopySelected() {
    // No parameters needed
  }

  @Emit("show-copy-info")
  emitShowCopyInfo() {
    // No parameters needed
  }

  @Emit("toggle-give-totals")
  emitToggleGiveTotals() {
    // No parameters needed
  }

  @Emit("toggle-show-actions")
  emitToggleShowActions() {
    // No parameters needed
  }
}
</script>
