<script setup>
import { useLight, q, m } from "#imports";
import { ref, computed, onMounted, useAttrs } from "vue";
import { useStorage } from "@vueuse/core";
import { useLightCardDefaults } from "../../composables/useLightProps";
defineOptions({ inheritAttrs: false });
const emit = defineEmits(["close"]);
const minimized = defineModel("minimized", { type: Boolean, ...{ default: false } });
const maximized = defineModel("maximized", { type: Boolean, ...{ default: false } });
const light = useLight();
const props = defineProps({
  loading: { type: Boolean, required: false },
  title: { type: String, required: false },
  permission: { type: String, required: false },
  closeable: { type: Boolean, required: false },
  minimizable: { type: Boolean, required: false },
  maximizable: { type: Boolean, required: false },
  name: { type: String, required: false },
  dark: { type: [Boolean, null], required: false, skipCheck: true },
  square: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  flat: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  bordered: { type: Boolean, required: false, skipCheck: true, default: void 0 },
  tag: { type: null, required: false }
});
const vAttrs = useAttrs();
const L_KEYS = ["loading", "title", "permission", "closeable", "minimizable", "maximizable", "name", "minimized", "maximized", "onUpdate:minimized", "onUpdate:maximized"];
const storedMinimized = props.name ? useStorage(`l-card-minimized-${props.name}`, false) : ref(false);
if (props.name && storedMinimized.value) {
  minimized.value = storedMinimized.value;
}
const cardProps = useLightCardDefaults(props, vAttrs, L_KEYS);
const barClass = computed(() => {
  const c = ["text-white"];
  const color = light.color;
  c.push(`bg-${color}`);
  return c;
});
const showBar = computed(() => {
  if (props.closeable) return true;
  if (props.maximizable) return true;
  if (props.minimizable) return true;
  if (props.title !== void 0) return true;
  if (showSecurity.value) return true;
  if (vAttrs.actions) return true;
  return false;
});
const showSecurity = computed(() => {
  if (props.permission === void 0) return false;
  if (!light.isAdmin) return false;
  return true;
});
const roles = ref([]);
if (props.permission && light.isAdmin) {
}
const onUpdatePermission = async (role) => {
  if (role.granted) {
    await m("addPermission", {
      role: role.name,
      value: props.permission
    });
  } else {
    await m("removePermission", {
      role: role.name,
      value: props.permission
    });
  }
};
onMounted(async () => {
  if (props.permission && light.isAdmin) {
    const data = await q({
      listRole: {
        name: true
      },
      listPermission: {
        __args: {
          filters: {
            value: props.permission
          }
        },
        data: {
          role: true
        }
      }
    });
    roles.value = data.listRole.map((r) => {
      return {
        name: r.name,
        granted: data.listPermission.data.find((p) => p.role == r.name) != void 0
      };
    });
  }
});
const onClose = () => {
  emit("close");
};
const onMinimize = () => {
  minimized.value = !minimized.value;
  if (props.name) {
    storedMinimized.value = minimized.value;
  }
};
</script>

<template>
    <q-card v-bind="cardProps" :class="{ 'fullscreen': maximized, 'no-margin': maximized }"
        v-if="$light.isGranted(permission)" :dark="$q.dark.isActive">
        <q-bar :class="barClass" v-if="showBar">
            <div>{{ $t(title ?? "") }}</div>
            <q-space />

            <slot name="actions"></slot>

            <q-btn dense flat icon="sym_o_lock" persistent v-if="showSecurity">
                <q-menu>
                    <q-list>
                        <q-item clickable v-for="role in roles">
                            <q-item-section>
                                <q-checkbox :label="role.name" v-model="role.granted"
                                    @update:model-value="onUpdatePermission(role)"></q-checkbox>
                            </q-item-section>
                        </q-item>
                    </q-list>
                </q-menu>
            </q-btn>

            <q-btn dense flat :icon="minimized ? 'sym_o_add' : 'sym_o_remove'" @click="onMinimize"
                v-if="minimizable && !maximized" />
            <q-btn dense flat @click="maximized = !maximized"
                :icon="maximized ? 'sym_o_select_window_2' : 'sym_o_crop_square'" v-if="maximizable" />
            <q-btn dense flat icon="sym_o_close" v-close-popup v-if="closeable" @click="onClose" />
        </q-bar>
        <slot v-if="!minimized || maximized"></slot>

        <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />
    </q-card>
</template>
