<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { type CreateIssueDto, useIssuesStore } from '@/stores/issues.ts'
import { useStatusesStore } from '@/stores/statuses.ts'
import { type Project, useProjectsStore } from '@/stores/projects.ts'

const issuesStore = useIssuesStore()
const { issues } = storeToRefs(issuesStore)

const statusesStore = useStatusesStore()
const { statuses } = storeToRefs(statusesStore)

const projectsStore = useProjectsStore()
const { projects } = storeToRefs(projectsStore)

const project = ref<Partial<Project>>({
  name: undefined,
  description: undefined,
})

const issue = ref<CreateIssueDto>({
  name: undefined,
  description: undefined,
  status_id: undefined,
  project_id: undefined,
})

async function saveIssue() {
  await issuesStore.create(issue.value)
}

async function saveProject() {
  if (project.value.id) {
    await projectsStore.update(project.value.id, project.value)
  } else {
    await projectsStore.create(project.value)
  }
  project.value = { name: undefined, description: undefined }
}

async function deleteProject(id: number) {
  await projectsStore.remove(id)
}

async function updateProject(data: Project) {
  project.value = { ...data }
}

onMounted(async () => {})
</script>

<template>
  <v-row>
    <v-col cols="12">
      <v-sheet class="mb-2">
        <v-toolbar title="projects" density="compact"></v-toolbar>
        <v-form @submit.prevent="saveProject" class="pa-4">
          <v-row align="center">
            <v-col>
              <v-text-field label="Name" hide-details v-model:model-value="project.name" required />
            </v-col>
          </v-row>
          <v-row align="center">
            <v-col>
              <v-text-field label="Description" hide-details v-model:model-value="project.description" />
            </v-col>
          </v-row>

          <v-row>
            <v-col cols="auto">
              <v-btn type="submit" text="save" />
            </v-col>
          </v-row>
        </v-form>
        <v-divider class="my-1" />
        <div class="pa-4">
          <div v-for="project in projects" :key="project.id" class="d-flex ga-2">
            <p>{{ project.id }}</p>
            <p>{{ project.name }}</p>
            <p v-if="project.description">{{ project.description }}</p>
            <p class="font-weight-light text-disabled" v-else>no description</p>
            <p>{{ project.key }}</p>
            <v-btn text="edit" variant="text" @click="updateProject(project)" />
            <v-btn text="delete" variant="text" @click="deleteProject(project.id)" />
          </div>
        </div>
      </v-sheet>
    </v-col>
    <v-col cols="12">
      <v-sheet class="mb-2">
        <v-toolbar title="statuses" density="compact"></v-toolbar>
        <div class="pa-4">
          <div v-for="{ id, name, description, position } in statuses" :key="id" class="d-flex ga-2 align-end">
            <p>{{ id }}</p>
            <p>{{ name }}</p>
            <p v-if="description">{{ description }}</p>
            <p class="font-weight-light text-disabled" v-else>no description</p>
            <p>{{ position }}</p>
          </div>
        </div>
      </v-sheet>
    </v-col>
    <v-col cols="12">
      <v-sheet class="mb-2">
        <v-toolbar title="issues" density="compact"></v-toolbar>
        <v-form @submit.prevent="saveIssue" class="pa-4">
          <v-row>
            <v-col>
              <v-text-field label="Name" hide-details v-model:model-value="issue.name" required />
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-text-field label="Description" hide-details v-model:model-value="issue.description" />
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-select
                label="Status"
                :items="statuses"
                item-title="name"
                item-value="id"
                hide-details
                v-model:model-value="issue.status_id"
              />
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-select
                label="Project"
                :items="projects"
                item-title="name"
                item-value="id"
                hide-details
                v-model:model-value="issue.project_id"
              />
            </v-col>
          </v-row>

          <v-row>
            <v-col cols="auto">
              <v-btn type="submit" text="save" />
            </v-col>
          </v-row>
        </v-form>
        <v-divider class="my-1" />
        <div class="pa-4">
          <div v-for="issue in issues" :key="issue.id" class="d-flex ga-2">
            <p>{{ issue.id }}</p>
            <p>{{ issue.name }}</p>
            <p v-if="issue.description">{{ issue.description }}</p>
            <p class="font-weight-light text-disabled" v-else>no description</p>
            <p>{{ issue.position }}</p>
            <p>{{ issue.created }}</p>
          </div>
        </div>
      </v-sheet>
    </v-col>
  </v-row>
</template>

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