<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CloudGroups from '~/components/CloudGroups.vue'
// import ProfileView from '~/components/ProfileView.vue'
import NavMenu from '~/components/NavMenu.vue'
import AccordionView from '~/components/AccordionView.vue'
import { load_data } from '~/hooks/utils'
// import { translate, show_message } from '~/hooks/utils'
import useState from '~/hooks/useState'
import { StatusItemType, StatusItemDataType, ResCloudDataCheck, CloudGroupServcType } from '~/typs/clouds'
import { MenuItemType } from '~/typs'
const title = ref('Services Status')
const search = ref('')
// const router = useRouter()
// const go = () => {
//   if (name.value)
//     router.push(`/hi/${encodeURIComponent(name.value)}`)
// }
const menu_items = useState().menu_items
const on_search = () => {
}
const tasks_hide = ref(false)
const apps_hide = ref(false)
const on_cloud_group = (target: string) => {
  if (target) {
    switch (target) {
      case useState().tsksrvcs:
        tasks_hide.value = !tasks_hide.value
        break
      case useState().appsrvcs:
        apps_hide.value = !apps_hide.value
        break
      default:
    }
  }
}
const on_nav_menu = (item: MenuItemType) => {
  if (item) {
    const dom_id = document.getElementById(item.id)
    if (dom_id) {
      dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
      setTimeout(() => window.scrollBy(0, -40), 1000)
    }
    menu_items.value = menu_items.value.map(i => ({ ...i, active: i.id !== item.id ? false : !i.active }))
    switch (item.id) {
      case useState().tsksrvcs:
        tasks_hide.value = false
        break
      case useState().appsrvcs:
        apps_hide.value = false
        break
      default:
    }
  }
}
const status_entries = ref([] as StatusItemType[])
const statusitems: StatusItemType[] = [
  {
    title: 'Why do I need Rust?',
    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iure quas laudantium dicta impedit, est id delectus molestiae deleniti enim nobis rem et nihil.',
    isOpen: true,
  },
  {
    title: 'Why am I so awesome?',
    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
    isOpen: false,
  },
  {
    title: 'Why learn on THIS?',
    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
    isOpen: false,
  },
]

const groups = ref(new Map() as Map<string, Map<string, CloudGroupServcType>>)
onMounted(async() => {
//  await nextTick()
  const use_local = false
  let url = 'groups.json'
  const rooturl = window.ROOT_LOCATION || location.origin
  if (!use_local)
    url = `${rooturl}/info`
 
  await load_data(url, 0, 2000, (res: ResCloudDataCheck) => {
    // use Map to keep objects order
    // use Object.keys + sort to map same result order
    if (res.group_apps) {
      Object.keys(res.group_apps).sort().forEach((grp_key) => {
        const data: Map<string, CloudGroupServcType> = new Map()
        Object.keys(res.group_apps[grp_key]).sort().forEach((key) => {
          data.set(key, res.group_apps[grp_key][key])
        })
        groups.value.set(grp_key, data)
      })
    }
    if (res.group_cloud) {
      Object.keys(res.group_cloud).forEach((grp_key) => {
        Object.keys(res.group_cloud[grp_key]).sort().forEach((key) => {
          const data: CloudGroupServcType[] = res.group_cloud[grp_key][key]
          data.forEach((it, index) => {
						if (groups.value.get(grp_key)) {
							const m = groups.value.get(grp_key)
							if (m && m.get(key) && it.tsksrvcs) {
								const m_data = m.get(key)
								if (m_data && m_data[index]) {
									m_data[index].tsksrvcs = it.tsksrvcs
									const new_data: Map<string, CloudGroupServcType> = new Map()
									new_data.set(key, m_data)
									groups.value.set(grp_key, new_data)
								}
							}
						} 	
          })
        })
      })
    }
    if (res.statusentries) {
      const statusentries: StatusItemType[] = []
      res.statusentries.forEach((it: StatusItemDataType) => {
        statusentries.push({ ...it, isOpen: false })
      })
      status_entries.value = statusentries
    }
    else {
      status_entries.value = statusitems
    }
  })
})
</script>

<template>
  <NavMenu :title="title" :items="menu_items" @on-nav-menu="on_nav_menu">
    <template #search>
      <input id="search" v-model="search" class="rounded-l-full w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none" type="text" placeholder="Search">
      <div class="p-1">
        <button
          class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none flex items-center justify-center"
          @click="on_search"
        >
          <span class="text-xs">
            <carbon-search class="align-bottom" />
          </span>
        </button>
      </div>
    </template>
  </NavMenu>
  <div class="mt-1 text-gray-800 p-2 lg:p-4">
    <CloudGroups
      title="Tasks"
      target="tsksrvcs"
      :groups="groups"
      :search="search"
      :hide="tasks_hide"
      @on-cloud-group="on_cloud_group"
    />
    <CloudGroups
      title="Apps"
      target="appsrvcs"
      :groups="groups"
      :search="search"
      :hide="apps_hide"
      @on-cloud-group="on_cloud_group"
    />
  </div>
  <div class="shadow-lg mx-auto bg-gray-200 text-gray-800 mt-4 md:mt-2 bg-light-800 w-full p-2 rounded-l">
    <AccordionView :items="statusitems" title="Services Status" />
  </div>
</template>
