<template>
  <div>
    <span
      class="text-caption"
      style="font-size: 12px !important; font-weight: 600"
    >
      {{ t('labels.mcadInvert') }}
    </span>
    <v-row
      align-content="space-around"
      no-gutters
    >
      <v-col class="pt-2">
        <v-checkbox
          color="primary"
          :model-value="x"
          density="compact"
          hide-details
          label="X-axis"
          style="font-weight: 500"
          @update:model-value="invertX"
        />
      </v-col>
      <v-col class="pt-2">
        <v-checkbox
          :model-value="y"
          density="compact"
          hide-details
          label="Y-axis"
          color="primary"
          style="font-weight: 500"
          @update:model-value="invertY"
        />
      </v-col>
      <v-col class="pt-2">
        <v-checkbox
          color="primary"
          :model-value="z"
          density="compact"
          hide-details
          label="Z-axis"
          style="font-weight: 500"
          @update:model-value="invertZ"
        />
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { useViewer3cr } from '@/composables/useViewer3cr';
import { computed } from 'vue';
import { ObjectInvert } from '@3cr/types-ts';
import { useI18n } from 'vue-i18n';
import { DataOverlayMcad } from '@3cr/viewer-types-ts';

interface Props {
  mcad: DataOverlayMcad;
}

const props = defineProps<Props>();

const { t } = useI18n();
const viewer3cr = useViewer3cr();

const x = computed(() => props.mcad.Inverted.InvertedSagittal);
const y = computed(() => props.mcad.Inverted.InvertedCoronal);
const z = computed(() => props.mcad.Inverted.InvertedTransverse);

async function invertX(): Promise<void> {
  const message = makeObjectInvert(!x.value, y.value, z.value);
  await viewer3cr.invertMcadObject({ message });
}

async function invertY(): Promise<void> {
  const message = makeObjectInvert(x.value, !y.value, z.value);
  await viewer3cr.invertMcadObject({ message });
}

async function invertZ(): Promise<void> {
  const message = makeObjectInvert(x.value, y.value, !z.value);
  await viewer3cr.invertMcadObject({ message });
}

function makeObjectInvert(x: boolean, y: boolean, z: boolean): ObjectInvert {
  return {
    Version: '0.0.0',
    Id: props.mcad.Id,
    Inverted: {
      Version: '0.0.0',
      InvertedSagittal: x,
      InvertedCoronal: y,
      InvertedTransverse: z,
    },
  };
}
</script>
