<template>
	<a-upload
		accept="image/*"
		v-model:file-list="fileList"
		name="image"
		list-type="picture-card"
		class="avatar-uploader"
		:show-upload-list="false"
		:customRequest="customRequest"
	>
		<div v-if="formData[imageField] != undefined">
			<img style="width: 128px" :src="formData[`${imageField}_url`]" alt="avatar" />
		</div>
		<div v-else>
			<loading-outlined v-if="loading"></loading-outlined>
			<plus-outlined v-else></plus-outlined>
			<div class="ant-upload-text">{{ $t("common.upload") }}</div>
		</div>
	</a-upload>
</template>
<script setup>
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { ref } from "vue";
import { useI18n } from "vue-i18n";

const props = defineProps({
	formData: null,
	folder: String,
	imageField: {
		default: "image",
		type: String,
	},
	url: {
		default: "upload-file",
		type: String,
	},
});

const emit = defineEmits(["onFileUploaded"]);

const fileList = ref([]);
const loading = ref(false);
const { t } = useI18n();

const customRequest = (info) => {
	const formData = new FormData();
	formData.append("image", info.file);
	formData.append("folder", props.folder);

	loading.value = true;

	axiosAdmin
		.post(props.url, formData, {
			headers: {
				"Content-Type": "multipart/form-data",
			},
		})
		.then((response) => {
			fileList.value = [];
			loading.value = false;

			emit("onFileUploaded", {
				file: response.data.file,
				file_url: response.data.file_url,
			});
		})
		.catch(() => {
			loading.value = false;
			message.error(t("messages.uploading_failed"));
		});
};
</script>
<style>
.avatar-uploader > .ant-upload {
	width: 128px;
	height: 128px;
}
.ant-upload-select-picture-card i {
	font-size: 32px;
	color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
	margin-top: 8px;
	color: #666;
}
</style>
