<script setup lang="ts">
import { computed, watchEffect } from 'vue'
import { useIssuesStore } from '@/stores/issues.ts'
import IssuesByStatusView from '@/components/IssuesByStatusList.vue'
import { useStatusesStore } from '@/stores/statuses.ts'

const issuesStore = useIssuesStore()
const statusesStore = useStatusesStore()
const statuses = computed(() => statusesStore.statuses)

const cols = computed(() => (statuses.value.length > 0 ? 12 / statuses.value.length : 12))

function getIssues(statusId: number) {
  return issuesStore.issuesObj.get(statusId) ?? []
}

function showLog() {
  console.log('issue obj', issuesStore.issuesObj)
}

watchEffect(() => {
  issuesStore.genIssuesObj(statuses.value)
})
</script>

<template>
  <div>
    <v-row>
      <v-col cols="3" align="center">
        <v-text-field hide-details label="search" prepend-inner-icon="mdi-magnify" />
      </v-col>
      <v-col>
        <v-btn icon="mdi-circle" size="default" density="comfortable" @click="showLog"></v-btn>
      </v-col>
    </v-row>
    <v-row v-if="statuses.length">
      <v-col :cols="cols" v-for="status in statuses" :key="status.id">
        <issues-by-status-view :status="status" :issues="getIssues(status.id)" />
      </v-col>
    </v-row>
  </div>
</template>

<style scoped lang="scss"></style>
