<template>
    <div class="keyboardViews">
        <ul class="keyboard">
            <li v-for="(key,index) in keyList" :key="index" track-by="$index" :class="{delete: key === 'Delete', tab: key === 'Tab', capslock: key === 'Caps', enter: key === 'Enter', shift: key === 'Shift', space: key === 'Space', shifted: (key === 'Shift') && hasShifted, capsed: (key === 'Caps') && hasCapsed }" v-text="key" @click="clickKey(key)"></li>
        </ul>
    </div>
    
</template>
<script>
    export default {
        data() {
            return {
                keyList: [],
                normalKeyList: [],
                shiftedKeyList: [],
                capsedKeyList: [],
                hasShifted: false,
                hasCapsed: false,
                keyvalue:'',
                closeText:'',
            }
    },
    created(){
      this.ready();
    },
    methods: {
            clickKey(key) {
                switch(key) {
                    case "Delete":
                        this.closeText = '';
                        let kbt = this.keyvalue;
                        this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
                        break;

                    case "Tab":
                        this.closeText = '';
                        this.keyvalue += "	";
                        break;

                    case "Enter":
                        this.closeText = 'Enter';
                        this.keyvalue += " ";
                        break;

                    case "Space":
                        this.closeText = '';
                        this.keyvalue += " ";
                        break;

                    case "Caps":
                        this.closeText = '';
                        this.hasCapsed = !this.hasCapsed;
                        this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList;
                        break;

                    case "Shift":
                        this.closeText = '';
                        this.hasShifted = !this.hasShifted;
                        this.keyList = this.hasShifted ? this.shiftedKeyList : this.normalKeyList;
                        break;
          
                    default:
                        this.closeText = '';
                        this.keyvalue += key;
                        break;
                }
                console.log(this.keyvalue)
                this.$emit("updatekey",this.keyvalue,this.closeText)
                this.$nextTick(()=>{
                    if(this.closeText == 'Enter'){
                        this.keyvalue = '';
                    }
                })
                
      },
      ready() {
            let normalKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
                        'Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\',
                        'Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", 'Enter',
                        'Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift', 
                        'Space'], 

                shiftedKeyList = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', 'Delete',
                        'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|',
                        'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '"', 'Enter',
                        'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', 'Shift', 
                        'Space'],

                capsedKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
                        'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\',
                        'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', "'", 'Enter',
                        'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'Shift', 
                        'Space'];

            this.keyList = this.normalKeyList = normalKeyList;
            this.shiftedKeyList = shiftedKeyList;
            this.capsedKeyList = capsedKeyList;
        }
        },
    
    }
</script>

<style lang="scss" scoped>
.keyboardViews{
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.2);
}
.keyboard {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 830px;
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;

    li {
        float: left;
        margin: 0 5px 5px 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 5px;

        &:hover {
            position: relative;
            border-color: gray;
            cursor: pointer;
        }
        &:active {
            top: 1px;
            left: 1px;
        }
    }

    .tab, .delete {
        width: 70px;
    }
    .capslock {
        width: 85px;
    }
    .enter {
        width: 90px;
    }
    .shift {
        width: 116px;
    }
    .space {
        clear: left;
        width: 810px;
    }
    .shifted {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
    }
    .capsed {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
    }
}
</style>