<template>
  <div v-if="mobile" class="d-flex align-center flex-wrap ga-2 w-100">
    <div class="d-flex align-center ga-1">
      <v-btn
        v-if="isViewMode || isEditMode"
        :disabled="!hasPrevRecord"
        :icon="mdiChevronLeft"
        size="small"
        variant="text"
        @click="$emit('prev')"
      />
      <v-btn
        v-if="isViewMode || isEditMode"
        :disabled="!hasNextRecord"
        :icon="mdiChevronRight"
        size="small"
        variant="text"
        @click="$emit('next')"
      />
    </div>
    <v-spacer />
    <v-btn
      v-if="isViewMode"
      color="primary"
      :prepend-icon="mdiPencil"
      size="small"
      variant="tonal"
      @click="$emit('switch-to-edit')"
    >
      {{ editLabel }}
    </v-btn>
    <v-btn
      v-if="isEditMode"
      color="primary"
      :prepend-icon="mdiEye"
      size="small"
      variant="tonal"
      @click="$emit('switch-to-view')"
    >
      {{ viewLabel }}
    </v-btn>
  </div>

  <template v-else>
    <v-btn
      v-if="isViewMode || isEditMode"
      :disabled="!hasPrevRecord"
      :prepend-icon="mdiSkipPrevious"
      size="small"
      variant="text"
      @click="$emit('first')"
    >
      {{ firstLabel }}
    </v-btn>
    <v-btn
      v-if="isViewMode || isEditMode"
      :disabled="!hasPrevRecord"
      :prepend-icon="mdiChevronLeft"
      size="small"
      variant="text"
      @click="$emit('prev')"
    >
      {{ prevLabel }}
    </v-btn>
    <v-btn
      v-if="isViewMode || isEditMode"
      :append-icon="mdiChevronRight"
      :disabled="!hasNextRecord"
      size="small"
      variant="text"
      @click="$emit('next')"
    >
      {{ nextLabel }}
    </v-btn>
    <v-btn
      v-if="isViewMode || isEditMode"
      :append-icon="mdiSkipNext"
      :disabled="!hasNextRecord"
      size="small"
      variant="text"
      @click="$emit('last')"
    >
      {{ lastLabel }}
    </v-btn>
    <v-spacer />
    <v-btn
      v-if="isViewMode"
      color="primary"
      :prepend-icon="mdiPencil"
      size="small"
      variant="tonal"
      @click="$emit('switch-to-edit')"
    >
      {{ editLabel }}
    </v-btn>
    <v-btn
      v-if="isEditMode"
      color="primary"
      :prepend-icon="mdiEye"
      size="small"
      variant="tonal"
      @click="$emit('switch-to-view')"
    >
      {{ viewLabel }}
    </v-btn>
  </template>
</template>

<script setup lang="ts">
import {
  mdiChevronLeft,
  mdiChevronRight,
  mdiEye,
  mdiPencil,
  mdiSkipNext,
  mdiSkipPrevious,
} from '@mdi/js'
defineProps({
  isViewMode: {
    type: Boolean,
    required: true,
  },
  isEditMode: {
    type: Boolean,
    required: true,
  },
  hasPrevRecord: {
    type: Boolean,
    required: true,
  },
  hasNextRecord: {
    type: Boolean,
    required: true,
  },
  mobile: {
    type: Boolean,
    default: false,
  },
  firstLabel: {
    type: String,
    default: '首筆',
  },
  prevLabel: {
    type: String,
    default: '上一筆',
  },
  nextLabel: {
    type: String,
    default: '下一筆',
  },
  lastLabel: {
    type: String,
    default: '末筆',
  },
  editLabel: {
    type: String,
    default: '編輯',
  },
  viewLabel: {
    type: String,
    default: '檢視',
  },
})

defineEmits<{
  (event: 'first'): void
  (event: 'prev'): void
  (event: 'next'): void
  (event: 'last'): void
  (event: 'switch-to-edit'): void
  (event: 'switch-to-view'): void
}>()
</script>
