<script setup lang="ts">
import { inject } from 'vue'
import type { KbxCommandDefinition } from '@kbx/contracts'
import KbxButton from './KbxButton.vue'
import { KbxPermissionHostKey } from '../permission/host'
const props=defineProps<{selectionCount:number;actions:KbxCommandDefinition[];can?:(permission:string)=>boolean}>()
const emit=defineEmits<{ command:[string] }>()
const permissionHost=inject(KbxPermissionHostKey,null)
function canPermission(permission:string){return props.can?props.can(permission):(permissionHost?.has(permission)??true)}
function visible(a:KbxCommandDefinition){return !a.permission||canPermission(a.permission)}
function disabled(a:KbxCommandDefinition){return (a.minSelection!=null&&props.selectionCount<a.minSelection)||(a.maxSelection!=null&&props.selectionCount>a.maxSelection)}
</script>
<template><div v-if="selectionCount>0" class="kbx-bulk" role="toolbar" :aria-label="`${selectionCount}건 선택 업무`"><strong>{{selectionCount.toLocaleString()}}건 선택</strong><KbxButton v-for="a in actions.filter(visible)" :key="a.id" :label="a.label" :variant="a.variant" :disabled="disabled(a)" @click="emit('command',a.id)"/></div></template>
<style scoped>.kbx-bulk{display:flex;align-items:center;gap:var(--kbx-space-2);min-height:44px;padding:6px var(--kbx-space-3);border:1px solid var(--kbx-color-border);background:var(--kbx-color-surface-muted);border-radius:var(--kbx-radius-sm)}.kbx-bulk strong{margin-right:var(--kbx-space-2);font-size:var(--kbx-font-sm)}</style>
