<script setup lang="ts">
import {computed} from 'vue';
import MenuIcon from './MenuIcon.vue';
import type {Project} from '../../shared/contracts/api.generated.ts';
const props=defineProps<{project:Project}>();
const base=computed(()=>'/projects/'+props.project.id+(props.project.deletedAt?'?state=deleted':''));
const destination=(view:string)=>base.value+(props.project.deletedAt?'&':'?')+'view='+view;
const writing=[
 {view:'progress',label:'View progress',icon:'progress'},
 {view:'history',label:'Session history',icon:'history'},
 {view:'badges',label:'Badges',icon:'badge'},
] as const;
const management=computed(()=>[
 ...(!props.project.archivedAt&&!props.project.deletedAt?[{view:'goals',label:'Goals',icon:'goal'} as const]:[]),
 ...(!props.project.deletedAt?[
  {view:'manuscript',label:'Manuscript length',icon:'manuscript'} as const,
  {view:'sharing',label:'Sharing',icon:'sharing'} as const,
 ]:[]),
 {view:'information',label:'Project information',icon:'information'} as const,
]);
</script>
<template>
 <nav class="project-tasks" aria-label="Project tasks">
  <a v-if="!project.archivedAt&&!project.deletedAt" class="primary project-record" :href="destination('record')">Record activity</a>
  <a v-else-if="project.deletedAt" class="primary project-record" :href="destination('lifecycle')">Restore project</a>
  <section v-if="!project.deletedAt" class="project-task-group" aria-labelledby="project-writing-label">
   <h2 id="project-writing-label">Your writing</h2>
   <ul class="project-task-list">
    <li v-for="item in writing" :key="item.view"><a class="project-task-row" :href="destination(item.view)"><MenuIcon :name="item.icon" /><span>{{item.label}}</span><MenuIcon name="next" /></a></li>
   </ul>
  </section>
  <section class="project-task-group" aria-labelledby="project-management-label">
   <h2 id="project-management-label">Manage project</h2>
   <ul class="project-task-list">
    <li v-for="item in management" :key="item.view"><a class="project-task-row" :href="destination(item.view)"><MenuIcon :name="item.icon" /><span>{{item.label}}</span><MenuIcon name="next" /></a></li>
   </ul>
  </section>
 </nav>
</template>
