<template>
  <div class="flex column items-center q-pa-lg">
    <pn-image-selector
      v-model="modelValue.logo"
      :size="100" 
      :iconsize="80" 
      class="q-pb-lg" 
    />
    <div class="q-gutter-y-lg w100">
      <q-input
        v-model="modelValue.name"
        no-error-icon
        dense
        filled
        class = "w100 fix-bottom-padding"
        :label="$t('project_card__project_name')"
        :rules="[rules.name]"
      />
      
      <q-input
        v-model="modelValue.description"
        dense
        filled
        autogrow
        class="w100"
        :label="$t('project_card__project_description')"
      />
    
      <q-checkbox
        v-if="modelValue.logo"
        v-model="modelValue.logo_as_bg"
        class="w100"
        dense
        >
        {{ $t('project_card__image_use_as_background_chats') }}
      </q-checkbox>
    </div>
  </div>

</template>

<script setup lang="ts">
  import { watch, computed } from 'vue'
  import type { ProjectParams } from 'src/types'
  import { useI18n } from 'vue-i18n'
  const { t }= useI18n()

  const modelValue = defineModel<ProjectParams>({ required: true })
  const emit = defineEmits(['valid'])
  const rulesErrorMessage = {
    name: t('project_card__error_name')
  }
  
  const rules = {
    name: (val :ProjectParams['name']) => !!val?.trim() || rulesErrorMessage['name']
  }

  const isValid = computed(() => {
    const checkName = rules.name(modelValue.value.name)
    return { name: checkName && (checkName !== rulesErrorMessage['name']) }
  })

  watch(isValid, (newVal) => {
    const allValid = Object.values(newVal).every(v => v)
    emit('valid', allValid)
  }, { immediate: true })

</script>

<style>
.q-field--with-bottom.fix-bottom-padding {
  padding-bottom: 0 !important
}
</style>
