<script setup lang="ts">
import AssesmentFunctionList from './assesment-function/list.vue'

const props = defineProps<{
  initialActiveTab: string
}>()

const activeTab = ref(props.initialActiveTab)
const emit = defineEmits<{
  changeTab: [value: string]
}>()

interface TabItem {
  value: string
  label: string
  component?: any
  props?: Record<string, any>
}

const tabs: TabItem[] = [
  { value: 'status', label: 'Status Masuk/Keluar' },
  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis' },
  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
  { value: 'therapy-protocol', label: 'Protokol Terapi' },
  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
  { value: 'consent', label: 'General Consent' },
  { value: 'patient-note', label: 'CPRJ' },
  { value: 'prescription', label: 'Order Obat' },
  { value: 'device', label: 'Order Alkes' },
  { value: 'mcu-radiology', label: 'Order Radiologi' },
  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
  { value: 'medical-action', label: 'Order Ruang Tindakan' },
  { value: 'mcu-result', label: 'Hasil Penunjang' },
  { value: 'consultation', label: 'Konsultasi' },
  { value: 'resume', label: 'Resume' },
  { value: 'control', label: 'Surat Kontrol' },
  { value: 'screening', label: 'Skrinning MPP' },
  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
]

function changeTab(value: string) {
  activeTab.value = value;
  emit('changeTab', value);
}
</script>

<template>
  <!-- Tabs -->
  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
    <Button
      v-for="tab in tabs"
      :key="tab.value"
      :data-active="activeTab === tab.value"
      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
      @click="changeTab(tab.value)"
    >
      {{ tab.label }}
    </Button>
  </div>

  <!-- Active Tab Content -->
  <div class="mt-4 rounded-md border p-4">
    <component
      v-if="tabs.find((t) => t.value === activeTab)?.component"
      :is="tabs.find((t) => t.value === activeTab)?.component"
      :label="tabs.find((t) => t.value === activeTab)?.label"
      v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
    />
  </div>
</template>
