const { inject, computed } = Vue;

export default {
    name: 'SelectionToolbar',
    setup() {
        const appState = inject('appState');

        const visible = computed(() => appState.selectedCells.value.size > 0);
        const count = computed(() => appState.selectedCells.value.size);
        const hasClipboard = computed(() => !!appState.clipboard.value);

        return {
            ...appState,
            visible,
            count,
            hasClipboard
        };
    },
    template: `
    <transition
      appear
      enter-active-class="animated bounceInUp"
      leave-active-class="animated bounceOutDown"
    >
      <div v-if="visible" class="selection-toolbar-root">
        <div class="selection-toolbar-content shadow-4">
          <div class="selection-toolbar-count text-weight-bold">
            {{ count }} selected
          </div>
          <q-separator vertical inset class="q-mx-sm" style="opacity: 0.2" />
          <div class="selection-toolbar-actions">
            <q-btn
              flat
              round
              dense
              color="primary"
              icon="content_copy"
              @click="copySelectedCells"
            >
              <q-tooltip>Copy (Ctrl+C)</q-tooltip>
            </q-btn>
            <q-btn
              flat
              round
              dense
              color="primary"
              icon="content_paste"
              :disabled="!hasClipboard"
              @click="pasteToSelectedCells"
            >
              <q-tooltip>Paste (Ctrl+V)</q-tooltip>
            </q-btn>
            <q-btn
              flat
              round
              dense
              color="primary"
              icon="close"
              @click="clearSelection"
              class="q-ml-sm"
            >
              <q-tooltip>Clear Selection (Esc)</q-tooltip>
            </q-btn>
          </div>
        </div>
      </div>
    </transition>
  `
};