<template>
  <pn-page-template>
    <template #title>
      {{ $t(title) }}
    </template>
    <template #card-actions>
      <q-btn
        rounded color="primary"
        class="w100 fix-disabled-btn"
        :disable="!isFormValid"
        @click = "onSubmit"
        >
        {{ $t(btnText) }}
      </q-btn>
    </template>

    <div class="flex column items-center q-pa-md q-pb-sm w100">
      <pn-image-selector
        v-model="projectMod.logo"
        :size="100" 
        :iconsize="80"
        type="rounded"
        class="q-pb-lg" 
      />
      
      <q-form
        ref="formRef"
        @validation-success="isFormValid = true"
        @validation-error="isFormValid = false"
        class="q-gutter-y-lg w100"
        >
        <q-input
          v-model="projectMod.name"
          dense
          filled
          class = "w100 fix-bottom-padding"
          :rules="[inputRules.require, inputRules.middleText]"
          @update:model-value="formRef.validate()"
          debounce="300"
          no-error-icon
          label-slot
          >
          <template #label>
            {{ $t('project_block__project_name') }} <span class="text-red">*</span>
          </template>
        </q-input>
        
        <q-input
          v-model="projectMod.description"
          dense
          filled
          autogrow
          no-error-icon
          class="w100 q-pt-sm fix-bottom-padding"
          :label="$t('project_block__project_description')"
          :rules="[inputRules.longText]"
          @update:model-value="formRef.validate()"
          debounce="300"
        />

        <q-input
          v-model="projectMod.chat_info"
          dense
          filled
          autogrow
          no-error-icon
          class="w100 q-pt-sm"
          :label="$t('project_block__project_chat_info')"
          :rules="[inputRules.longText]"
          @update:model-value="formRef.validate()"
          debounce="300"
        />
      </q-form>
    </div>
  </pn-page-template>

</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import pnImageSelector from 'components/pnImageSelector.vue'
  import { useInputRules } from 'composables/useInputRules'
  import { removeNullKeys, getFieldValue } from 'utils/helpers'
  import type { ProjectParams } from 'types/Project'
  
  const { inputRules } = useInputRules()

  const props = defineProps<{
    title: string,
    btnText: string,
    project?: ProjectParams
  }>()
  
  const emit = defineEmits(['update'])

  const projectMod = reactive({
    name: props.project?.name ?? '',
    description: props.project?.description ?? '',
    chat_info: props.project?.chat_info ?? '',
    logo: props.project?.logo ?? null
  })

  const formRef = ref()
  const isFormValid = ref(false)

  function onSubmit() {
    const { logo, name, description, chat_info } = projectMod
    let logoValue: string | null | undefined = undefined

    if (typeof logo === 'string' && logo.startsWith('data:image')) logoValue = logo
    if (logo === null) logoValue = null

    const outData = {
      name: name.trim(),
      description: getFieldValue(description.trim(), props.project?.description),
      chat_info: getFieldValue(chat_info.trim(), props.project?.chat_info),
      ...(logoValue !== undefined && { logo: logoValue })
    }

    emit('update', removeNullKeys(outData, ['logo']))
  }

  onMounted(async () => {
    await formRef.value.validate()
    if (!isFormValid.value) formRef.value.resetValidation()
  })
</script>

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