<template>
  <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">
        <div>
          {{$t('project_card__add_project')}}
        </div>
        <q-btn
          v-if="isFormValid && isDirty"
          @click = "addProject(project)"
          flat round
          icon="mdi-check"
        />
      </div>
    </template>
    <pn-scroll-list>
      <project-info-block
        v-model="project"
        @valid="isFormValid = $event"
      />
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
  import { useProjectsStore } from 'stores/projects'
  import type { ProjectParams } from 'src/types'


  const router = useRouter()
  const projectsStore = useProjectsStore()
  
  const initialProject: ProjectParams = {
    name: '',
    logo: '',
    description: '',
    logo_as_bg: false
  }

  const project = ref<ProjectParams>({ ...initialProject })
  const isFormValid = ref(false)

  const isDirty = computed(() => {
    return (
      project.value.name !== initialProject.name ||
      project.value.logo !== initialProject.logo ||
      project.value.description !== initialProject.description ||
      project.value.logo_as_bg !== initialProject.logo_as_bg
    )
  })
  
 async function addProject (data: ProjectParams) {
    const newProject = projectsStore.addProject(data)
    await router.push({name: 'chats', params: { id: newProject.id}})
  }

</script>
