<template>
<tr>
    <td colspan="5">
        <table>
            <tbody>
                <tr>
                    <td>
                        <table>
                        <tbody>
                            <check-input label='Monday' id='moday' name='monday'  :checked="checkMonday" @checkChange="isCheckedMonday"></check-input>
                        </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                        <tbody>
                        <check-input label='Tuesday' :checked="checkTuesday" @checkChange='isCheckedTuesday'></check-input>
                        </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                        <tbody>
                        <check-input label='Wednesday' :checked="checkWednesday" @checkChange='isCheckedWednesday'></check-input>
                        </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                        <tbody>
                        <check-input label='Thursday' :checked="checkThursday" @checkChange='isCheckedThursday'></check-input>
                        </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table>
                        <tbody>
                        <check-input label='Friday' :checked="checkFriday" @checkChange='isCheckedFriday'></check-input>
                        </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                        <tbody>
                        <check-input label='Saturday' :checked="checkSaturday" @checkChange='isCheckedSaturday'></check-input>
                        </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                        <tbody>
                        <check-input label='Sunday' :checked="checkSunday" @checkChange='isCheckedSunday'></check-input>
                        </tbody>
                        </table>
                    </td>
                    <td>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</template>
<script lang="ts">
import CheckInput from '@/lib-components/component/CheckInput.vue';
export default{
    name: 'SelectDaysOfWeek',
    components:{
        CheckInput,
    },
    data:()=>{
        return {
            checkMonday: false,
            checkTuesday: false,
            checkWednesday: false,
            checkThursday: false,
            checkFriday: false,
            checkSaturday: false,
            checkSunday: false,
            selectedDays: [],
        }
    },
    props: {
        checkDays: []
    },
    mounted(){
        
    },
    watch:{
        checkDays: function(array: []){
            this.selectedDays = array;
            array.forEach((element: string )=> {
            switch(element){
                    case 'monday': this.checkMonday =  true; break;
                    case 'tuesday': this.checkTuesday =  true; break;
                    case 'wednesday': this.checkWednesday =  true; break;
                    case 'thursday': this.checkThursday =  true; break;
                    case 'friday': this.checkFriday =  true; break;
                    case 'saturday': this.checkSaturday =  true; break;
                    case 'sunday': this.checkSunday =  true; break;
                }
            });
        }
    },
    methods: {
        updateSelectedDays(check: boolean, day: string){
            console.log('updateSelectedDays',check);
            (check)? this.selectedDays.push(day) : this.selectedDays = this.selectedDays.filter((item : string) => item != day);
            console.log('updateSelectedDays',this.selectedDays);
            this.$emit('update:selectedDaysOfWeek', this.selectedDays);
        },
        isCheckedMonday(check: boolean){
            this.checkMonday = check;
            console.log(check);
            this.updateSelectedDays(check, 'monday');
        },
        isCheckedTuesday(check: boolean){
            this.checkTuesday = check;
            console.log(check);
            this.updateSelectedDays(check, 'tuesday');
        },
        isCheckedWednesday(check: boolean){
            this.checkWednesday = check;
            console.log(check);
            this.updateSelectedDays(check, 'wednesday');
        },
        isCheckedThursday(check: boolean){
            this.checkThursday = check;
            console.log(check);
            this.updateSelectedDays(check, 'thursday');
        },
        isCheckedFriday(check: boolean){
            this.checkFriday = check;
            console.log(check);
            this.updateSelectedDays(check, 'friday');
        },
        isCheckedSaturday(check: boolean){
            this.checkSaturday = check;
            console.log(check);
            this.updateSelectedDays(check, 'saturday');
        },
        isCheckedSunday(check: boolean){
            this.checkSunday = check;
            console.log(check);
            this.updateSelectedDays(check, 'sunday');
        },
    },
}
</script>