<template>
    <div>
        <div v-if="isLoading" class="tx-semibold text-center text-default" style="height: 100px;">
            <span class="spinner-border spinner-border-sm"></span>
        </div>

        <div v-bind="getRootProps()" class="ff_fileupload_wrap" v-if="postModel.Thumbnail.length <= 0 && !isLoading">
            <div class="ff_fileupload_dropzone_wrap">
                <div class="ff_fileupload_dropzone">
                    <input v-bind="getInputProps()" />
                    <div class="dropify-message">
                        <i class="fas fa-cloud-upload-alt" style="font-size: 2rem;color: #9e9e9e9c;"></i>
                        <p v-if="isDragActive">Thả file vào đây ...</p>
                        <p v-else>Thả ảnh vào đây hoặc click để chọn...</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card overflow-hidden card-lada01" v-if="postModel.Thumbnail.length > 0 && !isLoading">
            <img alt="Image" class="img-fluid" :src="postModel.Thumbnail">
            <div class=" card-img-overlay justify-content-around mg-b-20 d-flex flex-row align-items-end">
                <button @click="changeThumb" type="button" class="btn btn-lada01 btn-dark button-icon">
                    <i class="fa fa-pen me-2"></i>
                    Thay đổi
                </button>
                <button @click="removeThumb" type="button" class="btn btn-lada01 btn-secondary button-icon">
                    <i class="fa fa-trash me-2"></i>Xóa
                </button>

            </div><!-- card-img-overlay -->
        </div>
    </div>
</template>
<script setup>

    import { ref, reactive } from 'vue';
    import { useDropzone } from "vue3-dropzone";

    //#region Toast
    import { useToast } from "vue-toastification";
    const toastOption = {

    };
    const toast = useToast();
    //#endregion

    //#region Services
    import pictureService from "@/services/pictureService";
    //#endregion

    const dropzoneOptions = reactive({
        multiple: false,
        onDrop,
        accept: '.jpg',
    });
    const { getRootProps, getInputProps, isDragActive, ...rest } = useDropzone({ onDrop });

    async function onDrop(acceptFiles, rejectReasons) {
        if (acceptFiles != null && acceptFiles.length > 0) {
            await uploadThumbPicture(acceptFiles[0]);
        }
    }

    //#region Data
    const postModel = reactive({
        Id: 0,
        Thumbnail: '',
    });
    const isLoading = ref(false);
    //#endregion

    //#region Methods
    const onSubmit = async () => {
        return postModel;
    };
    const init = async (initModel) => {
        postModel.Id = initModel.Id;
        postModel.Thumbnail = initModel.Thumbnail;
    };


    const uploadThumbPicture = async (selectedFile) => {
        isLoading.value = true;
        const formData = new FormData();
        formData.append(selectedFile.name, selectedFile);
        var uploadResult = await pictureService.uploadPostThumbPicture(formData);
        if (uploadResult != null && uploadResult.Result === 1) {
            postModel.Thumbnail = uploadResult.Url;
        } else {
            toast.error('Thất bại: ' + uploadResult.Message);
        }
        isLoading.value = false;
    };

    const removeThumb = async () => {
        postModel.Thumbnail = "";
    };

    const changeThumb = async () => {
        var selectedFile = null;
        var input = document.createElement('input');
        input.type = 'file';
        input.click();
        input.onchange = e => {
            selectedFile = e.target.files[0];
            uploadThumbPicture(selectedFile);
        }
    };

    //#endregion



    defineExpose({
        onSubmit,
        init
    })

</script>
<style lang="css">
    .ff_fileupload_dropzone {
        display: block;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        border: 2px dashed #e6e9f4;
        border-radius: 3px;
        padding: 0;
        /* background-color: #ecf0fa;
    background-image: url('@/assets/icons/upload.svg');
    background-repeat: no-repeat;
    background-position: center center; */
        opacity: .85;
        cursor: pointer;
        outline: none;
    }

    .dropify-message {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
    }

    .dropify-message p {
        color: #767676;
    }
</style>