<template>
  <div class="mt-2 w-full text-left">
    <input
      v-if="!showGiveNumbers"
      type="checkbox"
      :checked="allContactsSelected"
      class="align-middle ml-2 h-6 w-6"
      data-testId="contactCheckAllBottom"
      @click="emitToggleAllSelection"
    />
    <button
      v-if="!showGiveNumbers"
      :class="copyButtonClass"
      :disabled="copyButtonDisabled"
      @click="emitCopySelected"
    >
      Copy
    </button>
  </div>
</template>

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

/**
 * ContactBulkActions - Contact bulk actions component
 *
 * Provides bulk selection controls at the bottom of the contact list.
 * Handles copy operations for selected contacts.
 *
 * @author Matthew Raymer
 */
@Component({
  name: "ContactBulkActions",
})
export default class ContactBulkActions extends Vue {
  @Prop({ required: true }) showGiveNumbers!: boolean;
  @Prop({ required: true }) allContactsSelected!: boolean;
  @Prop({ required: true }) copyButtonClass!: string;
  @Prop({ required: true }) copyButtonDisabled!: boolean;

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

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