<template>
  <div class='form-part'>
    <div class='form-part-title'>
      <h4>Profil Resmi</h4>
    </div>
    <div class='form-part-content'>
      <template v-if="file.filePath !== '' && file.filePath !== null">
        <file-list-item
          :data='file'
          @click='ReplaceImage'
          onlyPreview
          :filePath='file.filePath' />
      </template>
      <template v-else>
        <template v-if="route.name === 'Profil' || (route.name === 'Profil' && !usersStore.isPanelUser)">
          <div class='form-item form-item-picture clickable' @click='picturePanel = true'>
            <div class='image-c'>
              <i class='ico-c'>
                <svg>
                  <use href='@/assets/images/icons.svg#plus'></use>
                </svg>
              </i>
            </div>
          </div>
        </template>
        <template v-else>
          <div class='form-inner-comment'>
            Eklenmiş resim bulunamadı.
          </div>
        </template>
      </template>
    </div>
  </div>
  <panel-wrapper
    v-if='picturePanel'
    v-model='picturePanel'
    panel-title='Profil Resmi Ekle'>
    <template #panelContent>
      <panel-user-picture />
    </template>
    <template #footerButton>
      <div class='button-c button-save' @click='FileUpload'>Ekle</div>
    </template>
  </panel-wrapper>
</template>
<script setup lang='ts'>
  import { ref, reactive, onBeforeMount } from 'vue'
  import PanelUserPicture from '../panel/PanelUserPicture.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'

  import { useRoute } from 'vue-router'

  const route = useRoute()
  import { useDataStore } from '@/stores/dataStore'

  const dataStore = useDataStore()
  import { useGlobalStore } from '@/stores/globalStore'

  const globalStore = useGlobalStore()
  import { useValidationStore } from '@/stores/validationStore'

  const validationStore = useValidationStore()
  import { useUsersStore } from '@/stores/usersStore'

  const usersStore = useUsersStore()
  import { useCustomerStore } from '@/module/uyeler/stores/customerStore'

  const customerStore = useCustomerStore()

  const picturePanel = ref<boolean>(false)
  const isUpdate = ref<boolean>(false)

  const file = reactive<Record<string, any>>({
    title: '',
    filePath: ''
  })

  const ReplaceImage = (d: object) => {
    Object.assign(dataStore.panelData, d)
    isUpdate.value = true
    picturePanel.value = true
  }

  const GetData = async () => {
    let dt = await dataStore.dataGet('AppUserResim/AppUserId/' + usersStore.selectedUserId())
    if (dt !== 'errorfalse') {
      Object.assign(file, dt)
      if (usersStore.selectedUserId() === usersStore.userId)
        usersStore.profilePhoto = file.filePath
    }
  }

  const FormCheck = (): boolean => {
    let check: any = true
    if (dataStore.panelData.file === null) {
      validationStore.panelInvalidText.file = 'Bir dosya seçmelisiniz'
      check = false
    } else delete validationStore.panelInvalidText.file
    if (check === '') check = true
    return check
  }

  const FileUpload = async () => {
    if (FormCheck()) {
      const formData = new FormData()
      formData.append('file', dataStore.panelData.file)
      formData.append('appUserId', String(usersStore.selectedUserId()))
      let dt: any

      if (!isUpdate.value) {
        dt = await dataStore.dataPost('AppUserResim/upload', {
          data: formData,
          headers: { 'Content-Type': 'multipart/form-data' }
        })
      } else {
        dt = await dataStore.dataPut('AppUserResim/' + dataStore.panelData.id, {
          data: formData,
          headers: { 'Content-Type': 'multipart/form-data' }
        })
      }
      if (dt !== 'errorfalse') {
        Object.assign(file, {})
        await GetData()
        picturePanel.value = false
        isUpdate.value = false
      }
    }
  }
  onBeforeMount(async () => {
    await GetData()
  })
</script>
