<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

// Slider icon upload sub-component. Mirrors StudentAvatarUpload's contract
// but renders a smaller preview (64px) and falls back to mdi-gauge. Used
// by TaskView for the calendar slider handle.
const props = defineProps({  // eslint-disable-line no-unused-vars
  sliderIcon: { type: String, default: '' },
  sliderIconMimeType: { type: String, default: '' },
  sliderIconFileName: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
})
const emit = defineEmits([
  'update:sliderIcon',
  'update:sliderIconMimeType',
  'update:sliderIconFileName',
  'error',
])

const { t } = useI18n()
const fileInput = ref(null)

function getDataUrl(icon, mimeType) {
  if (!icon || !mimeType) return null
  return `data:${mimeType};base64,${icon}`
}

function handleUpload(event) {
  const files = event.target?.files || event
  const file = Array.isArray(files) ? files[0] : files?.[0] || files
  if (!file) return

  if (!file.type.startsWith('image/')) {
    emit('error', t('student.sliderIcon.upload.selectImage'))
    return
  }
  if (file.size > 2 * 1024 * 1024) {
    emit('error', t('student.sliderIcon.upload.sizeExceeded'))
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    const base64 = e.target.result.split(',')[1]
    emit('update:sliderIcon', base64)
    emit('update:sliderIconMimeType', file.type)
    emit('update:sliderIconFileName', file.name)
    emit('error', '')
  }
  reader.onerror = () => emit('error', t('student.sliderIcon.upload.readError'))
  reader.readAsDataURL(file)
}

function remove() {
  emit('update:sliderIcon', '')
  emit('update:sliderIconMimeType', '')
  emit('update:sliderIconFileName', '')
}

function trigger() {
  fileInput.value?.click()
}
</script>

<template>
  <div class="d-flex align-center">
    <div class="position-relative me-4">
      <v-avatar size="64" rounded="md" class="elevation-2">
        <v-img
          v-if="sliderIcon && sliderIconMimeType"
          :src="getDataUrl(sliderIcon, sliderIconMimeType)"
          :alt="sliderIconFileName || t('student.sliderIcon.previewAlt')"
          cover
        />
        <v-icon v-else icon="mdi-gauge" size="32" color="grey-darken-1" />
      </v-avatar>
      <v-btn
        v-if="sliderIcon"
        icon="mdi-close"
        size="x-small"
        color="error"
        variant="elevated"
        class="position-absolute"
        style="top: -6px; right: -6px"
        :disabled="disabled"
        @click="remove"
      />
    </div>
    <div class="flex-grow-1">
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        style="display: none"
        @change="handleUpload"
      />
      <v-btn
        color="primary"
        variant="outlined"
        size="small"
        prepend-icon="mdi-image-plus"
        :disabled="disabled"
        @click="trigger"
      >
        {{ sliderIcon ? t('student.sliderIcon.upload.change') : t('student.sliderIcon.upload.button') }}
      </v-btn>
      <div class="text-caption text-medium-emphasis mt-2">
        {{ t('student.sliderIcon.upload.hint') }}
      </div>
    </div>
  </div>
</template>