<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { useIssuesStore } from '@/stores/issues.ts'
import IssuesByStatusView from '@/components/IssuesByStatusList.vue'
import { useStatusesStore } from '@/stores/statuses.ts'
import { useProjectsStore } from '@/stores/projects.ts'
import type { DynamicMenuElement } from '@/types.ts'
import DynamicMenu from '@/components/DynamicMenu.vue'
import { useRouter } from 'vue-router'
import IssueItemDetails from '@/components/IssueItemDetails.vue'

const issuesStore = useIssuesStore()
const statusesStore = useStatusesStore()
const projectsStore = useProjectsStore()
const router = useRouter()

const statuses = computed(() => statusesStore.statuses)

const props = defineProps<{ selectedIssue?: string }>()

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

const dialog = ref(false)

const items = [
  {
    id: 1,
    title: 'bla',
  },
]
const projectMenu: DynamicMenuElement[] = [
  {
    id: 1,
    title: 'Add people',
    icon: 'mdi-account',
    disabled: true,
    click: projectSettings,
  },
  {
    id: 2,
    title: 'Settings',
    icon: 'mdi-cog',
    click: projectSettings,
  },
  { id: 3, type: 'divider' },
  {
    id: 4,
    title: 'Delete',
    icon: 'mdi-trash-can',
    color: 'error',
    click: deleteProject,
  },
]

async function findById(val?: string) {
  if (!val) return

  const id = +val.split('-')[1]
  await issuesStore.findById(id)
  if (issuesStore.selectedIssue) dialog.value = true
}

function deleteProject() {
  console.log('blat')
}

function projectSettings() {
  console.log('blat2')
}

function onCancel() {
  router.push({ name: 'issues' })
  dialog.value = false
}

watchEffect(async () => await findById(props.selectedIssue))
watchEffect(() => issuesStore.genIssuesObj(statuses.value))
</script>

<template>
  <div>
    <v-row>
      <v-col cols="auto">
        <router-link to="/projects" class="text-black text-decoration-underline text-body-1 cursor-pointer">
          Projects
        </router-link>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="auto">
        <v-hover v-slot="{ isHovering, props }">
          <div v-bind="props" class="d-flex ga-2 align-center mb-4">
            <v-avatar size="28" color="blue" border rounded></v-avatar>
            <div class="text-h5 text-capitalize">{{ projectsStore.projects[0]?.name }}</div>
            <dynamic-menu v-bind="props" :isHovering="isHovering" :menu="projectMenu"></dynamic-menu>
          </div>
        </v-hover>
      </v-col>
    </v-row>
    <div class="d-flex ga-2 mb-4">
      <v-text-field max-width="15rem" hide-details label="search" prepend-inner-icon="mdi-magnify" />
      <v-select max-width="10rem" hide-details :items></v-select>
      <v-avatar icon="mdi-account-outline" color="grey-lighten-4"></v-avatar>
    </div>
    <div v-if="statuses.length" class="d-flex ga-2 my-2 overflow-x-auto">
      <div v-for="status in statuses" :key="status.id">
        <issues-by-status-view :status="status" :issues="getIssues(status.id)" />
      </div>
      <v-btn icon rounded size="small" density="default">
        <v-icon size="default">mdi-plus</v-icon>
      </v-btn>
    </div>

    <v-dialog v-model="dialog" width="auto" @after-leave="onCancel">
      <issue-item-details
        v-if="issuesStore.selectedIssue"
        @on-cancel="onCancel"
        :selected-issue="issuesStore.selectedIssue"
      />
    </v-dialog>
  </div>
</template>

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