<script setup lang="ts">
import { ClassroomComplianceAPIClient, type ClassesResponseClass } from '@/api/classroom_compliance'
import { useAuthStore } from '@/stores/auth'
import { type Ref, ref, onMounted, computed } from 'vue'
import ClassItem from '@/apps/classroom_compliance/ClassItem.vue'
import { useRouter } from 'vue-router'

const classes: Ref<ClassesResponseClass[]> = ref([])
const archivedClasses = computed(() => classes.value.filter(c => c.archived))
const activeClasses = computed(() => classes.value.filter(c => !c.archived))

const authStore = useAuthStore()
const router = useRouter()
const apiClient = new ClassroomComplianceAPIClient(authStore)

onMounted(() => {
  apiClient.getClasses().handleErrorsWithAlert().then(result => {
    if (result) classes.value = result
  })
})
</script>
<template>
  <div>
    <div class="button-bar align-center">
      <button type="button" @click="router.push('/classroom-compliance/edit-class')">Add Class</button>
    </div>
    <div>
      <ClassItem v-for="cls in activeClasses" :key="cls.id" :cls="cls" />
    </div>
    <div v-if="archivedClasses.length > 0">
      <h3 style="text-align: center;">Archived Classes</h3>
      <ClassItem v-for="cls in archivedClasses" :key="cls.id" :cls="cls" />
    </div>
  </div>
</template>
