<template>
    <div>
        <form action="/api/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="csvFile" ref="csvFileInput"
                   accept="text/csv" style="display: none;"
                   onchange="form.submit()">
        </form>
        <button
                @mouseenter="isHovered = true"
                @mouseleave="isHovered = false"
                @click="triggerUploadFile">
            <div v-if="isHovered">Upload File</div>
            <div v-else>
                <img src="/static/images/upload_icon.png">
            </div>
        </button>
    </div>

</template>

<script>
    export default {
        name: "UploadFileButton",

        data() {
            return {
                isHovered: false
            }
        },

        methods: {
            triggerUploadFile() {
                this.$refs.csvFileInput.click();
            }
        }
    }
</script>

<style scoped lang="less">
    @button-radius: 100px;
    @button-hovered-width: 300px;

    button {
        overflow: hidden;
        white-space: nowrap;

        position: fixed;

        padding: 5px;
        border-radius: @button-radius / 2;
        width: @button-radius;
        height: @button-radius;
        border: none;
        background-color: #2871e2;
        color: white;
        font-size: 30px;

        transition-property: width;
        transition-duration: 0.6s;

        bottom: 175px;
        left: 50px;
    }

    button:hover {
        width: @button-hovered-width;
        background-color: #286bd6;
    }

    button:focus {
        background-color: #2861c3;
    }

    img {
        width: @button-radius * 0.7;
        height: @button-radius * 0.7;
    }
</style>