<template>
  >>{{ project }}
  <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">
        <div>
          <span>{{ $t('project_card__project_card') }}</span>
        </div>
        <q-btn
          @click="updateProject()"
          flat
          round
          icon="mdi-check"
        />
      </div>
    </template>

    <pn-scroll-list>
      <project-info-block v-if="project" v-model="project"/>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useProjectsStore } from 'stores/projects'
import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
import type { Project } from '../types'
import { parseIntString } from 'boot/helpers'

// import { isObjEqual } from '../boot/helpers'

const router = useRouter()
const route = useRoute()
const projectsStore = useProjectsStore()

const project = ref<Project>()
const id = parseIntString(route.params.id)

onMounted(async () => {
    if (id && projectsStore.projectById(id)) {
      project.value = projectsStore.projectById(id)
    } else {
      await abort()
    }
})

function updateProject () {
  if (id && project.value) {
    projectsStore.updateProject(id, project.value)
    router.back()
  }
}

async function abort () {
  await router.replace({name: 'projects'})
}
</script>

<style>
</style>
