<template>
  <pn-page-card>
    <template #title>
      {{ $t(title) }}
    </template>
    <template #footer>
      <q-btn
        rounded color="primary"
        class="w100 q-mt-md q-mb-xs"
        :disable="!(isFormValid && (isDirty(initialProject, modelValue)))"
        @click = "emit('update')"
        >
        {{ $t(btnText) }}
      </q-btn>
    </template>

    <pn-scroll-list>
      <div class="flex column items-center q-pa-md q-pb-sm">
        <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
            label-slot
            class = "w100 fix-bottom-padding"
            :rules="[rules.name]"
            >
            <template #label>
              {{ $t('project_block__project_name') }} <span class="text-red">*</span>
            </template>
          </q-input>
          
          <q-input
            v-model="modelValue.description"
            dense
            filled
            autogrow
            class="w100 q-pt-sm"
            :label="$t('project_block__project_description')"
          />
    
          <!-- <q-checkbox
            v-if="modelValue.logo"
            v-model="modelValue.is_logo_bg"
            class="w100"
            dense
            >
            {{ $t('project_block__image_use_as_background_chats') }}
          </q-checkbox> -->
        </div>
      </div>
    </pn-scroll-list>
  </pn-page-card>

</template>

<script setup lang="ts">
  import { onMounted, computed, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { isDirty } from 'helpers/helpers'
  import type { ProjectParams } from 'types/Project'

  const { t } = useI18n()

  const modelValue = defineModel<ProjectParams>({
    required: true
  })

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

  const rulesErrorMessage = {
    name: t('project_block__error_name')
  }
  
  const rules = {
    name: (val: ProjectParams['name']) => !!val?.trim() || rulesErrorMessage['name']
  }

  const isFormValid = computed(() => {
    const validations = {
      name: rules.name(modelValue.value.name) === true
    }
    
    return Object.values(validations).every(Boolean)
  })

  const initialProject = ref({} as ProjectParams)

  onMounted(() => {
    initialProject.value = { ...modelValue.value }
  })
</script>

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