<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// Components
import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'

// Libraries
import { getPositionAs } from '~/lib/roles'

// Types
import type { EncounterProps } from '~/handlers/encounter-init.handler'

// Handlers
import { getEncounterData } from '~/handlers/encounter-process.handler'
import { getMenuItems } from "~/handlers/encounter-init.handler"

const { user, getActiveRole } = useUserStore()
const route = useRoute()
const router = useRouter()

const props = defineProps<{
  classCode?: EncounterProps['classCode']
  subClassCode?: EncounterProps['subClassCode']
}>()

const activeRole = getActiveRole()
const activePosition = ref(getPositionAs(activeRole))
const menus = ref([] as any)
const activeMenu = computed({
  get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
  set: (value: string) => {
    router.replace({ path: route.path, query: { menu: value } })
  },
})

const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const data = ref<any>(null)
const isShowPatient = computed(() => data.value && data.value?.patient?.person)

if (activePosition.value === 'none') { // if user position is none, redirect to home page
  router.push('/')
}

// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
const protocolRows = [
  {
    number: '1',
    tanggal: new Date().toISOString().substring(0, 10),
    siklus: 'I',
    periode: 'Siklus I',
    kehadiran: 'Hadir',
    action: '',
  },
  {
    number: '2',
    tanggal: new Date().toISOString().substring(0, 10),
    siklus: 'II',
    periode: 'Siklus II',
    kehadiran: 'Tidak Hadir',
    action: '',
  },
]

const paginationMeta = {
  recordCount: protocolRows.length,
  page: 1,
  pageSize: 10,
  totalPage: 1,
  hasNext: false,
  hasPrev: false,
}

function handleClick(type: string) {
  if (type === 'draft') {
    router.back()
  }
}

function initMenus() {
  menus.value = getMenuItems(id, props, user, activePosition.value, {
    status: data.value,
    medicalAssessment: data.value,
    medicalAssessmentRehab: data.value,
    functionAssessment: data.value,
    protocolTheraphy: data.value,
    protocolChemotherapy: data.value,
    medicineProtocolChemotherapy: data.value,
    consultation: data.value,
    letterOfControl: data.value,
  }, {
    protocolTheraphy: paginationMeta,
    protocolChemotherapy: paginationMeta,
    medicineProtocolChemotherapy: paginationMeta,
  })
  console.log(menus.value)
}

async function getData() {
  data.value = await getEncounterData(id)
}

watch(getActiveRole, () => {
  const activeRole = getActiveRole()
  activePosition.value = getPositionAs(activeRole)
  initMenus()
})

onMounted(async () => {
  await getData()
  initMenus()
})
</script>

<template>
  <div class="w-full">
    <div class="mb-4">
      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
    </div>
    <EncounterPatientInfo v-if="isShowPatient" :data="data" />
    <EncounterHistoryButtonMenu v-if="isShowPatient" />
    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
  </div>
</template>
