<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <AppsMedicalUIDataManager />
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12" class="d-flex justify-center">
        <AppsMedicalOdontogramCanvas
          :width="canvasWidth"
          :height="canvasHeight"
          ref="odontogramRef"
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <v-card>
          <v-card-title>Panduan Penggunaan</v-card-title>
          <v-card-text>
            <v-list density="compact">
              <v-list-item>
                <v-list-item-title
                  >1. Pilih jenis kondisi gigi dari toolbar</v-list-item-title
                >
              </v-list-item>
              <v-list-item>
                <v-list-item-title
                  >2. Klik pada area gigi yang ingin diberi
                  kondisi</v-list-item-title
                >
              </v-list-item>
              <v-list-item>
                <v-list-item-title
                  >3. Untuk kondisi per permukaan, klik pada area spesifik
                  (Atas/Kanan/Bawah/Kiri/Tengah)</v-list-item-title
                >
              </v-list-item>
              <v-list-item>
                <v-list-item-title
                  >4. Gunakan mode "Hapus" untuk menghilangkan
                  kondisi</v-list-item-title
                >
              </v-list-item>
              <v-list-item>
                <v-list-item-title
                  >5. Data akan tersimpan otomatis di browser</v-list-item-title
                >
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { useOdontogramStore } from "~/store/apps/medical/odontogram";
import { ref, computed, onMounted, onUnmounted, watch } from "vue";

const store = useOdontogramStore();
const odontogramRef = ref();

// Responsive canvas size
const windowWidth = ref(1500);
const canvasWidth = computed(() => Math.min(windowWidth.value - 40, 1400));
const canvasHeight = computed(() => Math.round(canvasWidth.value * 0.45));

import { toRaw } from "vue";

// Sync odontogram geometry with store conditions
watch(
  () => store.conditions,
  (newConditions) => {
    if (odontogramRef.value) {
      odontogramRef.value.$emit(
        "update:geometry",
        convertConditionsToGeometry(toRaw(newConditions))
      );
    }
  },
  { deep: true }
);

function convertConditionsToGeometry(conditions: readonly any[]) {
  const geometry: Record<string, any[]> = {};
  for (const condition of conditions) {
    const key = getKeyFromCondition(condition);
    if (!geometry[key]) {
      geometry[key] = [];
    }
    geometry[key].push({
      vertices: getVerticesForCondition(condition),
      options: { mode: condition.mode }
    });
  }
  return geometry;
}

function getKeyFromCondition(condition: any): string {
  // Implement key generation logic based on toothNumber and surface
  // Placeholder example:
  return `${condition.toothNumber}:${condition.surface || "all"}`;
}

function getVerticesForCondition(condition: any) {
  // Implement vertices calculation based on toothNumber, surface, and mode
  // Placeholder example:
  return [
    { x: 0, y: 0 },
    { x: 10, y: 0 },
    { x: 10, y: 10 },
    { x: 0, y: 10 }
  ];
}

onMounted(() => {
  // Load stored data on startup
  store.loadStoredData();

  // Add sample conditions for testing rendering
  if (store.conditions.length === 0) {
    // store.addCondition({ toothNumber: '11', surface: 'T', mode: 1 })
    // store.addCondition({ toothNumber: '21', surface: 'R', mode: 2 })
    // store.addCondition({ toothNumber: '31', surface: 'B', mode: 3 })
  }

  // Handle window resize
  const updateWindowWidth = () => {
    windowWidth.value = window.innerWidth;
  };

  window.addEventListener("resize", updateWindowWidth);
  updateWindowWidth();

  onUnmounted(() => {
    window.removeEventListener("resize", updateWindowWidth);
  });
});
</script>

<style>
/* .v-application {
  font-family: 'Roboto', sans-serif;
}

.v-container {
  max-width: 1200px;
} */
</style>
