<template>
    <div class="relative inline-block overflow-hidden rounded-full">
        <input type="file" ref="avatarInput" @change="onChangeFile" class="hidden" accept="image/*">

        <img :src="avatarUrl" alt="Avatar" class="h-full w-full object-cover">
        <div class="absolute top-0 h-full w-full bg-black bg-opacity-25 flex items-center justify-center">
            <button @click.prevent="browse"
                class="rounded-full hover:bg-white hover:bg-opacity-25 p-2 focus:outline-none text-white transition-colors duration-300">
                <IconRounded :icon="mdiCameraEnhanceOutline" class="bg-transparent h-6 w-6" />
            </button>
            <button v-if="file" @click.prevent="reset"
                class="rounded-full hover:bg-white hover:bg-opacity-25 p-2 focus:outline-none text-white transition-colors duration-300">
                <IconRounded :icon="mdiAlphaXCircleOutline " class="bg-transparent h-6 w-6" />
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { mdiCameraEnhanceOutline, mdiAlphaXCircleOutline  } from '@mdi/js';
import IconRounded from './IconRounded.vue';

const props = defineProps({

    modelValue: File,	
    defaultSrc: {
        type: String,
        required: true,
    },
});

// vue data properties
const file = ref<File | null>(null);
const avatarUrl = ref<string>(props.defaultSrc);
const avatarInput = ref<HTMLInputElement | null>(null);


// const avatarUrl = computed({
//     get: () => props.modelValue ? props.modelValue : props.defaultSrc,
//     set: (value: string) => {
//         emit('update:modelValue', value);
//     },
// });


const emit = defineEmits<{ (e: 'update:modelValue', file: File | null): void; (e: 'input', file: File | null): void }>();

// const avatarInput = ref<HTMLInputElement | null>(null);

const browse = () => {
    avatarInput.value?.click();
};

const reset = () => {
    file.value = null;
    avatarUrl.value = props.defaultSrc;
    emit('input', file.value);
};

const onChangeFile = (e: Event) => {
    // const target = (<HTMLInputElement>e.target)
    const target = e.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        file.value = target.files[0];
    }
    if (file.value) {
        emit('input', file.value);
        emit('update:modelValue', file.value);
        let reader = new FileReader();
        reader.readAsDataURL(file.value);
        reader.onload = (e) => {
            avatarUrl.value = e.target?.result as string;
        };

    }

};
</script>
