<template>
    <section v-if="hasFolders" id="folders" class="plugin">
        <table class="table table-sm table-borderless margin-bottom">
            <thead>
                <tr>
                    <th scope="col">FOLDERS</th>
                    <th scope="col" class="text-end">Size</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(folder, folderId) in folders" :key="folderId">
                    <td scope="row">
                        {{ folder.path }}
                    </td>
                    <td class="text-end" :class="getDecoration(folder)">
                        <span v-if="folder.errno > 0" class="visible-lg-inline">?</span>
                        {{ $filters.bytes(folder.size) }}
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
</template>

<script>
export default {
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        stats() {
            return this.data.stats['folders'];
        },
        folders() {
            return this.stats.map((folderData) => {
                return {
                    path: folderData['path'],
                    size: folderData['size'],
                    errno: folderData['errno'],
                    careful: folderData['careful'],
                    warning: folderData['warning'],
                    critical: folderData['critical']
                };
            });
        },
        hasFolders() {
            return this.folders.length > 0;
        }
    },
    methods: {
        getDecoration(folder) {
            if (folder.errno > 0) {
                return 'error';
            }
            if (folder.critical !== null && folder.size > folder.critical * 1000000) {
                return 'critical';
            } else if (folder.warning !== null && folder.size > folder.warning * 1000000) {
                return 'warning';
            } else if (folder.careful !== null && folder.size > folder.careful * 1000000) {
                return 'careful';
            }
            return 'ok';
        }
    }
};
</script>