<template>
  <v-card width="100%">
    <v-toolbar>
      <template v-if="$slots.header">
        <slot name="header" :title="title" :onClose="onClose" />
      </template>
      <template v-else>
        <v-row no-gutters class="fill-height px-6" align="center">
          <span class="font-weight-bold text-h5 text-capitalize">{{
            title
          }}</span>
        </v-row>
      </template>
    </v-toolbar>

    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
      <slot name="content" />
    </v-card-text>

    <v-toolbar class="pa-0" density="compact">
      <v-row no-gutters>
        <v-col cols="6" class="pa-0">
          <v-btn
            block
            variant="text"
            class="text-none"
            size="large"
            @click="emit('close')"
            height="48"
          >
            Close
          </v-btn>
        </v-col>

        <v-col cols="6" class="pa-0">
          <v-menu>
            <template #activator="{ props }">
              <v-btn
                block
                variant="flat"
                color="black"
                class="text-none"
                height="48"
                :disabled="disabled"
                v-bind="props"
                tile
              >
                More actions
              </v-btn>
            </template>

            <v-list class="pa-0 rounded-0">
              <v-list-item
                v-if="showQrButton && qrButtonLabel"
                @click="emit('showqr')"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ qrButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item
                v-if="showViewStock && viewButtonLabel"
                @click="emit('viewStock')"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ viewButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item
                v-if="showAddStock && addStockButtonLabel"
                @click="emit('addstock')"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ addStockButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item
                v-if="showApproveRequest && appproveRequestItemButtonLabel"
                @click="emit('approveRequest')"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ appproveRequestItemButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item
                v-if="showDisapproveRequest && disapproveRequestItemButtonLabel"
                @click="emit('disapproveRequest')"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ disapproveRequestItemButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item
                v-if="showRequestItem && requestItemButtonLabel"
                @click="emit('requestItem')"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ requestItemButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item v-if="canUpdate" @click="emit('edit')">
                <v-list-item-title class="text-subtitle-2">
                  {{ editButtonLabel }}
                </v-list-item-title>
              </v-list-item>

              <v-list-item
                v-if="canDelete"
                @click="emit('delete')"
                class="text-red"
              >
                <v-list-item-title class="text-subtitle-2">
                  {{ deleteButtonLabel }}
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-col>
      </v-row>
    </v-toolbar>
  </v-card>
</template>

<script setup lang="ts">
const prop = defineProps({
  canUpdate: {
    type: Boolean,
    default: true,
  },
  canDelete: {
    type: Boolean,
    default: true,
  },
  editButtonLabel: {
    type: String,
    default: "Edit Area",
  },
  deleteButtonLabel: {
    type: String,
    default: "Delete Area",
  },

  qrButtonLabel: {
    type: String,
    default: "Show QR",
  },
  showQrButton: {
    type: Boolean,
    default: false,
  },
  addStockButtonLabel: {
    type: String,
    default: "Add Stock",
  },
  viewButtonLabel: {
    type: String,
    default: "View Stock",
  },
  showAddStock: {
    type: Boolean,
    default: false,
  },
  showViewStock: {
    type: Boolean,
    default: false,
  },
  requestItemButtonLabel: {
    type: String,
    default: "Request Item",
  },

  appproveRequestItemButtonLabel: {
    type: String,
    default: "Approve Request",
  },

  showApproveRequest: {
    type: Boolean,
    default: false,
  },
  showDisapproveRequest: {
    type: Boolean,
    default: false,
  },
  disapproveRequestItemButtonLabel: {
    type: String,
    default: "Disapprove Request",
  },
  showRequestItem: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "Actions",
  },
});

const emit = defineEmits([
  "close",
  "edit",
  "delete",
  "showqr",
  "addstock",
  "viewStock",
  "requestItem",
  "approveRequest",
  "disapproveRequest",
]);
const {
  canUpdate,
  editButtonLabel,
  deleteButtonLabel,

  qrButtonLabel,
  showQrButton,
  addStockButtonLabel,
  viewButtonLabel,
  showAddStock,
  showViewStock,
  title,
  requestItemButtonLabel,
  showRequestItem,
  disabled,
} = prop;
</script>

<style scoped></style>
