<script setup lang="ts">
import MenuProvider from '@/components/Pages/MenuProvider.vue'
import Navigation from '@/components/Navigation/Navigation.vue'
import { useMenuStore } from '@/stores/menu'
import { RouterView } from 'vue-router'
import { useDialogStore } from '@/stores/dialog'
import { onMounted } from 'vue'
import { getVersion } from '@/utils/api/api.rest'
const menu = useMenuStore()
const dialog = useDialogStore()

const showDialogUpdate = () => {
  dialog.type = 'success'
  dialog.title = 'Update Aplikasi'
  dialog.content =
    'Aplikasi telah diperbarui. Silahkan muat ulang aplikasi untuk melihat perubahan.'
  dialog.confirmText = 'Muat Ulang'
  dialog.showCancelButton = false
  dialog.onConfirm = () => {
    window.location.reload()
  }
  dialog.dismissOnAction = false
  dialog.open = true
}

const checkVersion = () => {
  getVersion().then((response) => {
    if (response.data.version) {
      const version = response.data.version
      const localVersion = localStorage.getItem('version')
      if (localVersion) {
        if (localVersion !== version) {
          localStorage.setItem('version', version)
          showDialogUpdate()
        }
      } else {
        localStorage.setItem('version', version)
      }
    }

    setTimeout(() => {
      checkVersion()
    }, 60000)
  })
}

onMounted(() => checkVersion())
</script>

<template>
  <Navigation />
  <div
    :class="[
      'flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden bg-primary-50',
      'transition-transform',
      menu.sidebarShowed ? 'transform duration-300 lg:pl-80' : 'transform duration-300 md:pl-4'
    ]"
  >
    <MenuProvider>
      <RouterView />
    </MenuProvider>
  </div>
</template>
