<script lang="ts" setup>
import type { IUploadResponse } from '~/types/account'

interface Props {
  modelValue: string
  entity: string
  accept: string
  maxSize: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const { $storage } = useNuxtApp()

const value = computed({
  get(): string {
    return props.modelValue
  },
  set(value: string) {
    emit('update:modelValue', value)
  },
})

const inputRef = ref<HTMLInputElement>()
const loading = ref<boolean>(false)

const onSelect = async (e: Event) => {
  const target = e.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return
  target.value = ''

  if (file.size > props.maxSize * 1024 * 1024) {
    return useToast().add({
      title: 'File is too large.',
      color: 'error',
      icon: 'i-heroicons-exclamation-circle-solid',
    })
  }

  loading.value = true

  const formData = new FormData()
  formData.append('image', file)

  await $fetch<IUploadResponse>('upload', {
    method: 'POST',
    body: formData,
    params: {
      entity: props.entity,
      width: 300,
      height: 300,
    },
    ignoreResponseError: true,
    onResponse({ response }) {
      if (response.status !== 200) {
        useToast().add({
          icon: 'i-heroicons-exclamation-circle-solid',
          color: 'error',
          title: response._data?.message ?? response.statusText ?? 'Something went wrong',
        })
      }
      else if (response._data?.ok) {
        value.value = response._data?.path
      }

      loading.value = false
    },
  })
}
</script>

<template>
  <div class="flex gap-6">
    <div class="relative flex">
      <UAvatar
        :src="$storage(value)"
        size="3xl"
        img-class="object-cover"
      />

      <UTooltip
        text="Upload avatar"
        class="absolute top-0 end-0 -m-2"
        :popper="{ placement: 'right' }"
      >
        <UButton
          type="button"
          color="neutral"
          variant="link"
          icon="i-heroicons-cloud-arrow-up"
          size="xs"
          :ui="{ base: 'rounded-full' }"
          :loading="loading"
          @click="inputRef.click()"
        />
      </UTooltip>
      <UTooltip
        text="Delete avatar"
        class="absolute bottom-0 end-0 -m-2"
        :popper="{ placement: 'right' }"
      >
        <UButton
          type="button"
          color="neutral"
          variant="link"
          icon="i-heroicons-x-mark-20-solid"
          size="xs"
          :ui="{ base: 'rounded-full' }"
          :disabled="loading"
          @click="value = ''"
        />
      </UTooltip>
      <input
        ref="inputRef"
        type="file"
        class="hidden"
        :accept="accept"
        @change="onSelect"
      >
    </div>
    <div class="text-sm opacity-80">
      <div>Max upload size: {{ maxSize }}Mb</div>
      <div>Accepted formats: {{ accept }}</div>
    </div>
  </div>
</template>
