<template>
    <div>
        <EditFormBox
                v-bind:form-type="formType"
                v-bind:table-row="formData"
                v-bind:cancel-callback="hideForm"
                v-bind:show-popup="showPopup"
                v-if="isFormShown"
        />
        <Table v-bind:table-data="tableData" v-bind:show-form-callback="showForm"/>
        <UploadFileButton v-if="!isFormShown"/>
        <AddNewEntryButton v-if="!isFormShown" v-bind:show-form-callback="showForm"/>

        <transition name="fade">
            <PopupMessage v-if="isPopupShown" v-bind:message="popupMessage"/>
        </transition>
    </div>
</template>

<script>
    import EditFormBox from "./components/EditFormBox.vue";
    import Table from "./components/Table.vue";
    import UploadFileButton from "./components/UploadFileButton.vue";
    import AddNewEntryButton from './components/AddNewEntryButton.vue';
    import PopupMessage from './components/PopupMessage.vue'

    import axios from 'axios';


    export default {
        name: "App",
        components: {PopupMessage, EditFormBox, Table, UploadFileButton, AddNewEntryButton},

        data() {
            return {
                tableData: [],
                formType: null,
                formData: null,
                isFormShown: false,

                isPopupShown: false,
                popupMessage: '',
            }
        },

        mounted() {
            this.updateTable();
        },

        methods: {
            updateTable() {
                axios
                    .request({
                        url: '/api/get/',
                        method: 'post',
                        headers: {'Content-Type': 'application/json'},
                        data: JSON.stringify({'type': 'full'})
                    })
                    .then(response => {
                        this.tableData = response.data;
                    })
            },

            showPopup(message) {
                if (!this.isPopupShown) {
                    this.isPopupShown = true;
                    this.popupMessage = message;

                    setTimeout(() => {
                        this.isPopupShown = false;
                        this.popupMessage = '';
                    }, 2000)
                }
            },

            showForm(formType, formData) {
                this.formType = formType;
                this.formData = formData;
                this.isFormShown = true;
            },

            hideForm() {
                this.formType = null;
                this.formData = null;
                this.isFormShown = false;

                this.updateTable()
            }
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>