<template>
  <v-btn
    color="primary"
    :loading="loading"
    size="x-small"
    variant="text"
    @click="toggle"
  >
    <v-icon
      class="minsk-500"
      :icon="icon"
      start
    />
    <span
      class="minsk-900"
      style="font-size: 12px !important"
      >{{ label }}</span
    >
  </v-btn>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { ObjectVisibility } from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { useMcadStore } from '@/stores/mcad.store';
import { storeToRefs } from 'pinia';
import { Chunker } from '@/functions/chunker';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { mcads } = storeToRefs(useMcadStore());
const viewer3cr = useViewer3cr();

const loading = ref<boolean>(false);

const visibility = computed(() => {
  return mcads.value.some((mcad) => mcad.Visibility);
});

const icon = computed(() => {
  return visibility.value ? 'visibility' : 'visibility_off';
});

const label = computed(() => {
  return visibility.value ? t('labels.hideAll') : t('labels.showAll');
});

async function toggle(): Promise<void> {
  loading.value = true;
  const value = !visibility.value;
  await Chunker.Instantiate().ExecuteInChunks(10, mcads.value, async (mcad) => {
    const message: ObjectVisibility = {
      Version: '0.0.0',
      Id: mcad.Id,
      Visibility: value,
    };
    await viewer3cr.setMcadObjectVisibility({ message });
  });
  loading.value = false;
}
</script>
