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

    <pn-scroll-list>
      <div class="flex column items-center q-pa-md q-pb-sm">
        <div class="relative-position">
          <pn-auto-avatar
            :img="modelValue.photo"
            :name="tname"
            size="100px"
            class="q-pb-lg"
            :style="!userStatus ? {} : { filter: 'grayscale(100%)'}"
          />
        <div
          v-if="userStatus"
          class="absolute-center text-h4 text-bold q-pa-sm"
          :class ="'status-' + userStatus.status"
          >
          {{ $t(userStatus.text) }}
        </div>
        </div>
        <div class="flex row items-start justify-center no-wrap q-pb-lg">
          <div class="flex column justify-center">
            <div class="text-bold q-pr-xs text-center" align="center">{{ tname }}</div>
            <div caption class="text-blue text-caption" align="center" v-if="modelValue.username">{{ modelValue.username }}</div>
          </div>
        </div>

        <div class="q-gutter-y-lg w100">
          <q-input
            v-model.trim="modelValue.fullname"
            dense
            filled
            class = "w100"
            :label = "$t('user_block__name')"
          />

          <q-select
            v-model="modelValue.company_id"
            :options="displayCompanies"
            dense
            filled
            class="w100 q-pt-sm"
            :label = "$t('user_block__company')"
            option-value="id"
            emit-value
            map-options
            >
            <template #option="scope">
              <q-item v-bind="scope.itemProps">
                <q-item-section avatar>
                  <pn-auto-avatar
                    v-if="scope.opt.id"
                    :img="scope.opt.logo"
                    :name="scope.opt.label"
                    size="md"
                    type="rounded"
                  />
                  <q-avatar
                    v-else
                    rounded
                    size="md"
                    >
                    <q-icon size="32px" color="grey" name="mdi-cancel"/>
                  </q-avatar>   
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ scope.opt.label }}</q-item-label>
                </q-item-section>
              </q-item>
            </template>
          </q-select>

          <q-input
            v-model.trim="modelValue.department"
            dense
            filled
            class = "w100 q-pt-sm"
            :label = "$t('user_block__department')"
          />

          <q-input
            v-model.trim="modelValue.role"
            dense
            filled
            class = "w100 q-pt-sm"
            :label = "$t('user_block__role')"
          />
        </div>

      </div>
    </pn-scroll-list>
  </pn-page-card>

</template>

<script setup lang="ts">
  import { onMounted, computed, ref } from 'vue'
  import { useCompaniesStore } from 'stores/companies'
  import { useI18n } from 'vue-i18n'
  import { isDirty } from 'helpers/helpers'
  import type { User } from 'types/Users'

  const { t } = useI18n()

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

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

  const initialUser = ref({} as User)

  onMounted(() => {
    initialUser.value = { ...modelValue.value }
  })

  const companiesStore = useCompaniesStore()
  const companies = computed(() => companiesStore.companies)

  const displayCompanies = computed(() => [
    ...companies.value.map(el => ({ 
      id: el.id,
      label: el.name,
      logo: el.logo
    })),
    { 
      id: null,
      label: t('user_block__no_company'),
      logo: '' 
    }
  ])

  const tname = computed(() => 
    [modelValue.value?.firstname, modelValue.value?.lastname]
        .filter(Boolean)
        .join(' ')
  )

  const userStatus = computed(() => {
    if (modelValue.value.is_blocked) return { status: 'blocked', text: 'user_block__user_blocked'}
    if (modelValue.value.is_leave) return { status: 'leave', text: 'user_block__user_leave'}
    return null
  })

</script>

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

  .status-blocked {
    border: 2px solid red;
    color: red;
  }

  .status-leave {
    border: 2px solid var(--q-primary);
    color: var(--q-primary);
  }
</style>
