<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(initialCompany, modelValue)))"
        @click = "emit('update')"
        >
        {{ $t(btnText) }}
      </q-btn>
    </template>

    <pn-scroll-list>
      <div class="flex column items-center q-pa-md q-pb-sm">
        <slot name="myCompany"/>
        <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-for="input in textInputs"
            :key="input.id"
            v-model.trim="modelValue[input.val]"
            dense
            filled
            class="w100"
            :autogrow="input.val === 'description' || input.val === 'address'"
            :class="input.val === 'name'
              ? 'fix-bottom-padding' 
              : input.val === 'address'
                ? 'input-fix q-pt-sm'
                : 'q-pt-sm'"
            :label="input.label ? $t(input.label) : void 0"
            :rules="input.val === 'name' ? [rules[input.val]] : []"
            no-error-icon
            :label-slot="Boolean(input.label)"
            >
            <template #prepend>
              <q-icon v-if="input.icon" :name="input.icon"/>
            </template>
            <template #label v-if="input.label">
              {{$t(input.label) }}
              <span v-if="input.val === 'name'" class="text-red">*</span>
            </template>
          </q-input>
        </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 { CompanyParams } from 'types/Company'

  const { t }= useI18n()

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

  defineProps<{
    title: string,
    btnText: string
  }>()

  const emit = defineEmits(['update'])

  interface TextInput {
    id: number
    label?: string
    icon?: string
    val: keyof CompanyParams
    rules: ((value: string) => boolean | string)[]
  }

  const textInputs: TextInput[] = [
    { id:  1, val: 'name', label: 'company_block__name', rules: [] },
    { id:  2, val: 'description', label: 'company_block__description', rules: [] },
    { id:  3, val: 'site', icon: 'mdi-web', rules: [] },
    { id:  4, val: 'address', icon: 'mdi-map-marker-outline', rules: [] },
    { id:  5, val: 'phone', icon: 'mdi-phone-outline', rules: [] },
    { id:  6, val: 'email', icon: 'mdi-email-outline', rules: [] }
  ]

  const rulesErrorMessage = {
    name: t('company_block__error_name')
  }

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

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

  const initialCompany = ref({} as CompanyParams)

  onMounted(() => {
    console.log(111, modelValue.value)
    initialCompany.value = { ...modelValue.value }
  })
  
</script>

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

  .input-fix :deep(.q-field__prepend.q-field__marginal) {
    height: auto !important;
  }
</style>
