<script setup lang="ts">
import { $t } from '@/locales';

defineOptions({
  name: 'TableHeaderOperation'
});

interface Props {
  itemAlign?: NaiveUI.Align;
  disabledDelete?: boolean;
  loading?: boolean;
  operations?: {
    add?: boolean;
    refresh?: boolean;
    delete?: boolean;
    columns?: boolean;
  };
}

defineProps<Props>();

interface Emits {
  (e: 'add'): void;
  (e: 'delete'): void;
  (e: 'refresh'): void;
}

const emit = defineEmits<Emits>();

const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
  default: () => []
});

function add() {
  emit('add');
}

function batchDelete() {
  emit('delete');
}

function refresh() {
  emit('refresh');
}
</script>

<template>
  <NSpace :align="itemAlign" justify="space-between" wrap class="lt-sm:w-200px">
    <slot name="prefix"></slot>
    <div class="space-x-5">
      <slot name="default">
        <NButton v-if="operations?.add" size="small" ghost type="primary" @click="add">
          <template #icon>
            <icon-ic-round-plus class="text-icon" />
          </template>
          {{ $t('common.add') }}
        </NButton>

        <NButton
          v-if="operations?.delete"
          size="small"
          ghost
          type="error"
          :disabled="disabledDelete"
          @click="batchDelete"
        >
          <template #icon>
            <icon-ic-round-delete class="text-icon" />
          </template>
          {{ $t('common.batchDelete') }}
        </NButton>
      </slot>
      <NButton v-if="operations?.refresh" size="small" @click="refresh">
        <template #icon>
          <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
        </template>
        {{ $t('common.refresh') }}
      </NButton>
      <TableColumnSetting v-if="operations?.columns" v-model:columns="columns" />
    </div>
    <slot name="suffix"></slot>
  </NSpace>
</template>

<style scoped></style>
