<template>
    <pn-page-card>
    <template #title>
      {{ $t(title) }}
    </template>
    <template #footer>
      <q-btn
        rounded color="primary"
        class="w100 q-mt-md q-mb-xs"
        @click = "emit('update', newFiles)"
        :disable="!(isFormValid && (isDirty(initialTask, modelValue) || newFiles.length !== 0))"
        >
        {{ $t(btnText) }}
      </q-btn>
    </template>
    <pn-scroll-list>
      <div class="flex column items-center q-pa-md q-pb-sm">
        <div class="q-gutter-y-lg w100">

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

          <q-input
            v-model.trim="modelValue.name"
            dense
            filled
            class = "w100 fix-bottom-padding q-pt-sm"
            :rules="[rules.name]"
            no-error-icon
            label-slot
            >
            <template #label>
              {{ $t('task_block__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('task_block__description')"
          />

          <pn-file-uploader
            v-model:exist-files ="modelValue.files"
            v-model:new-files ="newFiles"
            :existFileData="files"
            :label="$t('meeting_block__attach_files')"
            class="q-pt-sm"
          />

          <div class="flex column">
            <div class="text-caption">
              {{ $t('task_block__plan') }}
            </div>
            <div class="flex no-wrap justify-between q-gutter-x-md">
              <q-input
                v-model="taskDate"
                dense filled
                mask="##/##/####"
                :rules=[rules.date]
                no-error-icon
                :label="$t('task_block__date')"
                hide-bottom-space
                >
                <template #prepend>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                      <q-date
                        v-model="taskDate"
                        mask="DD/MM/YYYY"
                        class="relative-position"
                        :options="d => d >= date.formatDate(Date.now(), 'YYYY/MM/DD')"
                        :navigation-min-year-month="date.formatDate(Date.now(), 'YYYY/MM')"
                        >
                        <div class="absolute" style="top: 0; right: 0;">
                          <q-btn
                            v-close-popup
                            round flat 
                            color="white"
                            icon="mdi-close"
                            class="q-ma-sm"
                          />
                        </div>
                      </q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>

              <q-input
                v-model="taskTime"
                dense filled
                mask="time"
                :rules="[rules.time]"
                no-error-icon
                :label="$t('task_block__time')"
                hide-bottom-space
                >
                <template #prepend>
                  <q-icon name="access_time" class="cursor-pointer">
                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                      <q-time
                        v-model="taskTime"
                        mask="HH:mm"
                        format24h
                        class="relative-position"
                        >
                        <div class="absolute" style="top: 0; right: 0;">
                          <q-btn
                            v-close-popup
                            round flat 
                            color="white"
                            icon="mdi-close"
                            class="q-ma-sm"
                          />
                        </div>
                      </q-time>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </div>

          <q-select
            v-model="modelValue.assigned_to"
            :options="displayUsers"
            dense
            filled
            class="w100 file-input-fix q-pt-sm"
            :label = "$t('task_block__assigned_to')"
            option-value="id"
            option-label="displayName"
            emit-value
            map-options
            >
            <template #prepend>
              <q-icon name="mdi-account-arrow-left-outline"/>
            </template>
            <template #option="scope">
              <q-item v-bind="scope.itemProps">
                <q-item-section avatar>
                  <pn-auto-avatar
                    :img="scope.opt.photo"
                    :name="scope.opt.displayName"
                    size="md"
                  />
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ scope.opt.displayName }}</q-item-label>
                </q-item-section>
              </q-item>
            </template>
          </q-select>

          <q-select
            v-model="modelValue.observers"
            :options="displayUsers"
            dense
            filled
            class="w100 file-input-fix q-pt-sm"
            :label = "$t('task_block__observers')"
            option-value="id"
            option-label="displayName"
            emit-value
            map-options
            use-chips
            multiple
            >
            <template #prepend>
              <q-icon name="mdi-account-eye-outline"/>
            </template>
            <template #option="scope">
              <q-item v-bind="scope.itemProps">
                <q-item-section avatar>
                  <q-avatar round size="md">
                    <img v-if="scope.opt.photo" :src="scope.opt.photo"/>
                    <pn-auto-avatar v-else :name="scope.opt.name"/>
                  </q-avatar>   
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ scope.opt.displayName }}</q-item-label>
                </q-item-section>
              </q-item>
            </template>
          </q-select>

          
          <div class="flex column">

            <div class="q-py-none q-my-none text-caption flex items-baseline">
              <span>{{$t('task_block__priority')}}</span>
              <q-icon
                name="mdi-flag-triangle"
                class="q-ml-xs"
                :color="getToogleColor()"
                />
            </div>  

            <q-btn-toggle
              v-model="modelValue.priority"
              no-caps
              :toggle-color="getToogleColor()"
              spread
              unelevated
              dense
              :options="priority"
              class="w100"
              >
              <template 
                v-for="item in priority"
                :key="item.id" #[item.slot]
                >
                <div class="row items-center no-wrap gap-xs text-weight-regular">
                 <span 
                    :class="modelValue.priority === item.value ? '' : 'text-grey'"
                    >
                    {{ $t(item.translationKey) }}
                 </span>
                </div>
              </template>
            </q-btn-toggle>

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

  
</template>

<script setup lang="ts">
  import { computed, ref, onMounted } from 'vue'
  import type { TaskParams } from 'types/Task'
  import { useChatsStore } from 'stores/chats'
  import { useUsersStore } from 'stores/users'
  import { useFilesStore } from 'stores/files'
  import { useI18n } from 'vue-i18n'
  import { isDirty } from 'helpers/helpers'
  import { date } from 'quasar'
  const { t } = useI18n()
  const filesStore = useFilesStore()
  const files = filesStore.getFiles
  const newFiles=ref<File[]>([])

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

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

  const emit = defineEmits(['update'])

  const chatsStore = useChatsStore()
  const chats = chatsStore.getChats
  const displayChats = computed(() => [
    ...chats.map(el => ({ 
      id: el.id,
      name: el.name,
      logo: el.logo
    })),
    { 
      id: null,
      name: t('task_block__no_chat'),
      logo: ''
    }
  ])

  const usersStore = useUsersStore()
  const users = usersStore.getUsers

  const displayUsers = computed(() => {
    return users
      .map(el => ({ ...el, displayName: usersStore.userNameById(el.id) }))
  })

  const taskDate = computed({
    get: () => date.formatDate(modelValue.value.plan_date * 1000, 'DD/MM/YYYY'),
    set: (d) => updateDateTime(d, taskTime.value)
  })

  const taskTime = computed({
    get: () => date.formatDate(modelValue.value.plan_date * 1000, 'HH:mm'),
    set: (t) => updateDateTime(taskDate.value, t)
  })

  function updateDateTime (dateStr: string, timeStr: string) {
    if (dateStr.length === 10 && timeStr.length === 5) {
      const newDate = date.extractDate(`${dateStr} ${timeStr}`, 'DD/MM/YYYY HH:mm')
      if (!isNaN(newDate.getTime())) {
        modelValue.value.plan_date = newDate.getTime() / 1000
      }
    }
  }

  const priority = [
    { id: 1, slot: 's1', label: '', translationKey: 'task_block__priority_normal', value: 0, props: { color: 'green' } },
    { id: 2, slot: 's2', label: '', translationKey: 'task_block__priority_important', value: 1, props: { color: 'amber' } },
    { id: 3, slot: 's3', label: '', translationKey: 'task_block__priority_critical', value: 2, props: { color: 'red' } }
  ]

  function getToogleColor () {
    const priorityItem = priority.find(el => el.value === modelValue.value.priority) 
    return priorityItem
      ? priorityItem.props.color
      : 'primary'
  }

  const rulesErrorMessage = {
    name: t('task_block__error_name'),
    date: t('task_block__error_date'),
    time: t('task_block__error_time')
  }

  const rules = {
    name: (val: TaskParams['name']) => !!val?.trim() || rulesErrorMessage['name'],
    date: () => (!!modelValue.value.plan_date && modelValue.value.plan_date > Date.now() / 1000) || rulesErrorMessage['date'],
    time: () => (!!modelValue.value.plan_date && modelValue.value.plan_date > Date.now() / 1000) || rulesErrorMessage['time']
  }

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

  const initialTask = ref({} as TaskParams)

  onMounted(() => {
    if (!modelValue.value.assigned_to) modelValue.value.assigned_to = usersStore.myId.id
    initialTask.value = { ...modelValue.value }
  })
  
</script>

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

  .file-input-fix :deep(.q-field__append) {
    height: auto !important;
  }

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