<script setup>
import { useQuasar } from "quasar";
import { computed, useAttrs } from "vue";
import useLight from "../../composables/useLight";
import { useLightButtonDefaults } from "../../composables/useLightProps";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  size: { type: null, required: false },
  type: { type: null, required: false },
  to: { type: null, required: false },
  replace: { type: Boolean, required: false, skipCheck: true },
  href: { type: null, required: false },
  target: { type: null, required: false },
  label: { type: null, required: false },
  icon: { type: null, required: false },
  iconRight: { type: null, required: false },
  outline: { type: Boolean, required: false, skipCheck: true },
  flat: { type: Boolean, required: false, skipCheck: true },
  unelevated: { type: Boolean, required: false, skipCheck: true },
  rounded: { type: Boolean, required: false, skipCheck: true },
  push: { type: Boolean, required: false, skipCheck: true },
  square: { type: Boolean, required: false, skipCheck: true },
  glossy: { type: Boolean, required: false, skipCheck: true },
  fab: { type: Boolean, required: false, skipCheck: true },
  fabMini: { type: Boolean, required: false, skipCheck: true },
  padding: { type: null, required: false },
  color: { type: null, required: false },
  textColor: { type: null, required: false },
  noCaps: { type: Boolean, required: false, skipCheck: true },
  noWrap: { type: Boolean, required: false, skipCheck: true },
  dense: { type: Boolean, required: false, skipCheck: true },
  ripple: { type: Boolean, required: false, skipCheck: true },
  tabindex: { type: null, required: false },
  align: { type: null, required: false },
  stack: { type: Boolean, required: false, skipCheck: true },
  stretch: { type: Boolean, required: false, skipCheck: true },
  loading: { type: [Boolean, null], required: false, skipCheck: true },
  disable: { type: Boolean, required: false, skipCheck: true },
  round: { type: Boolean, required: false, skipCheck: true },
  percentage: { type: null, required: false },
  darkPercentage: { type: Boolean, required: false, skipCheck: true },
  onClick: { type: Function, required: false },
  permission: { type: String, required: false, default: "" },
  confirmMessage: { type: String, required: false, default: "" },
  confirmTitle: { type: String, required: false, default: "Confirm" }
});
const $q = useQuasar();
const light = useLight();
const attrs = useAttrs();
const L_KEYS = ["permission", "confirmMessage", "confirmTitle"];
const handleClick = (evt) => {
  if (props.confirmMessage) {
    $q.dialog({
      title: props.confirmTitle,
      message: props.confirmMessage,
      ok: "Yes",
      cancel: "No"
    }).onOk(() => props.onClick?.(evt));
  } else {
    props.onClick?.(evt);
  }
};
const base = useLightButtonDefaults(props, attrs, L_KEYS);
const btnProps = computed(() => {
  const { onClick, ...rest } = base.value;
  return rest;
});
</script>

<template>
    <q-btn v-if="light.isGranted(props.permission)" v-bind="btnProps" @click="handleClick">
        <slot />
    </q-btn>
</template>
