<template>
  <q-btn-group push flat style="color: grey">
    <q-btn v-if="props.permitAdd" dense flat icon="add" @click="emit('add')">
      <q-tooltip v-if="props.toolTipAdd">{{ props.toolTipAdd }}</q-tooltip>
    </q-btn>
    <q-btn
      v-if="props.permitSelect"
      dense
      flat
      style="color: grey"
      :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
      @click="selectOption = !selectOption"
    >
      <q-tooltip v-if="props.toolTipSelect">{{ props.toolTipSelect }}</q-tooltip>
    </q-btn>
    <q-btn v-if="props.permitImport" dense flat icon="upload" @click="emit('import')">
      <q-tooltip v-if="props.toolTipImport">{{ props.toolTipImport }}</q-tooltip>
    </q-btn>
    <q-btn v-if="props.permitExport" dense flat icon="download" @click="emit('export')">
      <q-tooltip v-if="props.toolTipExport">{{ props.toolTipExport }}</q-tooltip>
    </q-btn>
  </q-btn-group>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  permitAdd: Boolean,
  toolTipAdd: String,
  toolTipSelect: String,
  toolTipImport: String,
  toolTipExport: String,
  permitSelect: Boolean,
  permitImport: Boolean,
  permitExport: Boolean,
  selectOption: Boolean,
});

const emit = defineEmits(['add', 'update:selectOption', 'import', 'export']);

const selectOption = computed({
  get: () => props.selectOption,
  set: (v) => {
    emit('update:selectOption', v);
  },
});
</script>
