<template>
<div style="padding: 5px;">
    <h2>Buttons Styles</h2>
    <h4>Left Aligned Panel</h4>
    <bt-buttonpanel dir="left">
        <bt-button type="primary">Primary</bt-button>
        <bt-button type="secondary">Secondary</bt-button>
        <bt-button type="tertiary">Tertiary</bt-button>
        <bt-button type="header">Header</bt-button>
        <bt-button>Default</bt-button>
        <bt-button class="activity">Class Activity</bt-button>
        <bt-button class="activity visited">Class Activity Visited</bt-button>
        <bt-button><bt-icon :icon="homeIcon" class="left"/>Left Icon</bt-button>
        <bt-button>Right Icon <bt-icon :icon="homeIcon" class="right"/></bt-button>
    </bt-buttonpanel>
    <h4>Center Alinged Panel</h4>
    <bt-buttonpanel dir="center">
        <!-- <bt-buttonmenu>
            <span slot="title">What do i do ?</span>
            <ul>
                <li><a>Proceed</a>
                    <ul>
                        <li><a>With option 1.1</a></li>
                        <li><a>With option 1.3</a></li>
                    </ul>
                </li>
                <li><a>Option 2</a></li>
            </ul>
        </bt-buttonmenu> -->
        <bt-button type="primary">Primary</bt-button>
        <bt-button type="secondary">Secondary</bt-button>
        <bt-button type="tertiary">Tertiary</bt-button>
        <bt-button>Default</bt-button>
        <bt-button type="warning">Warning</bt-button>
        <bt-button type="tertiary">Tertiary</bt-button>
    </bt-buttonpanel>
    <h4>Right Aligned panel</h4>
    <bt-buttonpanel dir="right">
        <bt-button type="primary">Primary</bt-button>
        <bt-button type="secondary">Secondary</bt-button>
        <bt-button type="tertiary">Tertiary</bt-button>
        <bt-button>Default</bt-button>
    </bt-buttonpanel>
    <h4>File Input Default</h4>
    <bt-fileinput id="fileInput1" @change="fileEventsRead" fileTypes=".xlsx"/>
    <h4>File Input With file Name</h4>
    <bt-fileinput id="fileInput2" @files="filesRead" showFileName/>
    <h4>File Input With Multiple</h4>
    <bt-fileinput id="fileInput3" @change="fileEvents" multiple showFileName/>
    <h4>File Input With Specific file type</h4>
    <bt-fileinput id="fileInput4" @change="fileEvents" fileTypes=".xlsx,.docx" showFileName/>
    <input type="file" id="fileInput5" name="fileInput5[]" accept=".xlsx" @change="fileEventsRead"/>
    <router-link to="/">Back to Home</router-link>
</div>
</template>

<script lang="babel" type="text/javascript">
import { faHome } from '@btplc/fontawesome-bt-svg-icons'
import XLSX from '../xlsx/XLSX'
export default {
    name: 'TestButtons',
    created () {
        this.homeIcon = faHome
    },
    methods: {
        fileEvents(d) {
            console.log(d)
        },
        fileEventsRead(d) {
            let list = []
            let files = d.target.files
            for (let i = 0, f = files[i]; i !== files.length; ++i) {
                XLSX.fromDataAsync(f).then(wb => {
                    wb.sheets().forEach(sh => {
                        list.push({ sheetName: sh.name(), isEmpty: sh.isEmpty() })
                    })
                    console.log(list)
                })
            }
        },
        filesRead (d) {
            let list = []
            let files = d
            for (let i = 0, f = files[i]; i !== files.length; ++i) {
                XLSX.fromDataAsync(f).then(wb => {
                    wb.sheets().forEach(sh => {
                        list.push({ sheetName: sh.name(), isEmpty: sh.isEmpty() })
                    })
                    console.log(list)
                })
            }
        }
    }
}
</script>
