<script setup lang="ts">
import {ref,onMounted,onUnmounted} from 'vue';
import {useHeaderMenu} from '../composables/header-menu.ts';
import MenuIcon from './MenuIcon.vue';
import type {Project,ProjectPage} from '../../shared/contracts/api.generated.ts';
const props=defineProps<{project:Project;view?:string}>();
const {menu,trigger,open,toggle:toggleMenu}=useHeaderMenu();
const items=ref<readonly Project[]>([]),loaded=ref(false),loading=ref(false),error=ref('');
let controller:AbortController|null=null,request=0;
const destination=(id:string)=>'/projects/'+id+(['progress','record','history','manuscript','information','goal','goals'].includes(props.view??'')?'?view='+props.view:'');
async function load(){const token=++request;controller?.abort();controller=new AbortController();const signal=controller.signal;loading.value=true;error.value='';try{let rows:Project[]=[],cursor:string|null=null;do{const r=await fetch('/api/v1/projects?limit=100'+(cursor?'&cursor='+encodeURIComponent(cursor):''),{signal});if(!r.ok)throw Error('Projects could not be loaded.');const p:ProjectPage=await r.json();if(token!==request)return;rows.push(...p.items);cursor=p.nextCursor;}while(cursor);if(!rows.some(p=>p.id===props.project.id))rows.unshift(props.project);items.value=rows;loaded.value=true;}catch(e){if(token===request)error.value=String(e);}finally{if(token===request)loading.value=false;}}
function toggle(){toggleMenu();if(open.value&&!loaded.value&&!loading.value)void load();}
function suspend(){request++;controller?.abort();loading.value=false;}
function resume(event:PageTransitionEvent){if(event.persisted){loaded.value=false;if(open.value)void load();}}
onMounted(()=>{window.addEventListener('pagehide',suspend);window.addEventListener('pageshow',resume);});
onUnmounted(()=>{suspend();window.removeEventListener('pagehide',suspend);window.removeEventListener('pageshow',resume);});
</script>
<template>
 <div ref="menu" class="project-switcher">
  <h1 id="project-title"><button ref="trigger" type="button" class="project-switcher-trigger" :aria-expanded="open" :aria-controls="'project-picker-'+project.id" :aria-describedby="'project-picker-hint-'+project.id" @click="toggle"><span>{{project.title}}</span><svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m4 6 4 4 4-4"/></svg></button></h1>
  <span :id="'project-picker-hint-'+project.id" class="sr-only">Switch project</span>
  <div v-if="open" :id="'project-picker-'+project.id" class="menu-popover project-switcher-menu">
   <p v-if="loading&&!loaded" class="menu-message" role="status">Loading projects…</p>
   <p v-if="error" class="menu-message" role="alert">{{error}} <button type="button" :disabled="loading" @click="load">Retry projects</button></p>
   <nav v-if="loaded" aria-label="Choose project"><a v-for="p in items" :key="p.id" class="menu-item" :href="destination(p.id)" :aria-current="p.id===project.id?'page':undefined"><MenuIcon name="project" /><span>{{p.title}}</span><MenuIcon v-if="p.id===project.id" name="check" /></a></nav>
   <a class="menu-item" href="/projects/new"><MenuIcon name="plus" /><span>New project</span></a>
  </div>
 </div>
</template>
