<template>
  <v-dialog v-model="modal" persistent width="535" data-testid="mcad-update-modal">
    <v-card class="new-style position-relative">
      <v-card-title class="pl-6 pr-6 pb-0 pt-4">
        <span>{{ t('labels.mcadEdit') }}</span>
        <v-btn
          variant="text"
          size="default"
          icon="close"
          color="shark_400"
          @click="modal = false"
          data-testid="close-top"
          class="annotation-close-button position-absolute"
          style="top: 0; right: 0"
        />
      </v-card-title>
      <v-card-text class="pt-3">
        <v-form density="compact">
          <sh-text-field v-model="title" :label="t('fields.title.label')" variant="outlined" class="new-style pb-0" />
          <sh-textarea
            no-resize
            v-model="description"
            variant="outlined"
            :label="t('fields.description.label')"
            :placeholder="t('fields.description.placeholder')"
            counter="400"
            class="Title-text-field pt-0"
          />
          <v-divider class="pt-4 mt-4" />
          <mcad-invert :mcad="mcad" style="border-radius: 8px; background-color: white" class="pb-3" />
          <span class="text-caption" style="font-size: 12px !important; font-weight: 600">
            {{ t('labels.colour') }}
          </span>
          <v-row class="pt-1 pl-3">
            <v-col class="pl-0 pr-0">
              <ColourPalette v-model="colour" class="pl-0 pr-0" />
            </v-col>
          </v-row>
        </v-form>
      </v-card-text>
      <v-card-actions class="pb-4 pr-4">
        <v-spacer />
        <v-btn color="minsk_900" data-testid="close" variant="text" @click="modal = false">
          <span>{{ t('labels.cancel') }}</span>
        </v-btn>
        <v-btn class="ml-auto" data-testid="save" color="minsk_900" variant="flat" @click="updateMcadObject">
          <span>{{ t('labels.save') }}</span>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { hexToRgba, rgbaToHex } from '@/functions/colours';
import { useViewer3cr } from '@/composables/useViewer3cr';
import ShTextarea from '@/components/ShTextarea.vue';
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 title = ref<string>('');
const description = ref<string>('');
const colour = ref<string>('');

const modal = defineModel<boolean>({ default: false });

watch(modal, (modalOpen: boolean) => {
  if (modalOpen) {
    hydrate();
  }
});

function hydrate(): void {
  const toByte = (n: number) => n * 255;
  const { R, G, B, A } = props.mcad.Colour;
  title.value = props.mcad.Title;
  colour.value = rgbaToHex(toByte(R), toByte(G), toByte(B), toByte(A));
}

async function updateMcadObject(): Promise<void> {
  const toDec = (n: number) => n / 255;
  const [r, g, b, a] = hexToRgba(colour.value);

  const titleMessage = { Version: '0.0.0', Id: props.mcad.Id, Value: title.value };
  await viewer3cr.setMcadObjectTitle({ message: titleMessage });

  const colourMessage = {
    Version: '0.0.0',
    Id: props.mcad.Id,
    Colour: { Version: '0.0.0', R: toDec(r), G: toDec(g), B: toDec(b), A: toDec(a) || 1 }
  };
  await viewer3cr.setMcadObjectColour({ message: colourMessage });
  modal.value = false;
}
defineExpose({
  modal
});
</script>
