<template>
    <transition name="modal-animation">
        <div class="modal fade show modal-overlay" :class="{ 'show-modal' : modalActive == true}" tabindex="-1" id="connection_modal" v-show="modalActive">
            <div class="modal-dialog modal-dialog-centered" >
                <div class="modal-content">
                    <div class="modal-header" :class="backgroundColor" id="connection_modal_header" style="height: 39px;padding-top: 8px;">
                        <h5 class="text-white mb-0" id="connection_modal_heading">{{title}}</h5>
                        <button @click="closeModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table style="border:none;">
                            <tbody>
                                <RowForm  label="Schedule Type">
                                    <DropDownListDS placeholder="select schedule type" id="schedule_type" name="schedule_type" attribute="schedule_type" :value="scheduleType" :optionList="typeScheduleList"  @selectchange="selectchange"></DropDownListDS>
                                </RowForm>
                            </tbody>
                        </table>
                        <continuous-schedule v-if="showContinuousSchedule" :taskId="taskId" @cancel='closeModal' @save='save' :scheduleData="scheduleData" :scheduleId="scheduleId"></continuous-schedule>
                        <daily-schedule v-if="showDailySchedule" :taskId="taskId" @cancel='closeModal'  @save='save' :scheduleData="scheduleData" :scheduleId="scheduleId"></daily-schedule>
                        <monthly-schedule v-if="showMonthlySchedule" :taskId="taskId" @cancel='closeModal' @save='save' :scheduleData="scheduleData" :scheduleId="scheduleId"></monthly-schedule>
                        <weekly-schedule v-if="showWeeklySchedule" :taskId="taskId" @cancel='closeModal' @save='save' :scheduleData="scheduleData" :scheduleId="scheduleId"></weekly-schedule>
                        <yearly-schedule v-if="showYearlySchedule" :taskId="taskId" @cancel='closeModal' @save='save' :scheduleData="scheduleData" :scheduleId="scheduleId"></yearly-schedule>
                    </div>
                </div>
            </div>
            
        </div>
    </transition>
    <Modal title='Schedule Task' :text='text' @close='closeModalInfo' @cancel="closeModalInfo" :modalActive="showText"  showOkButton="true" :showLoad="showLoadModal" backgroundColor="colorBackgroundModalValidate" confirmButtonText='Submit'></Modal>
</template>
<script lang="ts">
import RowForm from '@/lib-components/component/RowForm.vue';
import ContinuousSchedule from '@/lib-components/component/Schedule/ContinuousSchedule.vue';
import DailySchedule from '@/lib-components/component/Schedule/DailySchedule.vue';
import MonthlySchedule from '@/lib-components/component/Schedule/MonthlySchedule.vue';
import WeeklySchedule from '@/lib-components/component/Schedule/WeeklySchedule.vue';
import YearlySchedule from '@/lib-components/component/Schedule/YearlySchedule.vue';
import DropDownListDS from  '@/lib-components/component/DropDownListDS.vue';
import Modal from '@/lib-components/component/Modal.vue';
import { TaskService } from '@/domain/services/Task.service';
import { Attribute } from '@/domain/models/Attribute.interface';
import { jsonUtilities } from '@/infrastructure/utilities/jsonUtilities';
import { ScheduleType } from '@/domain/models/tasks/enums/ScheduleType.enum';
export default{
    name: 'ModalSchedule',
    components:{
        RowForm,
        ContinuousSchedule,
        DailySchedule,
        MonthlySchedule,
        WeeklySchedule,
        YearlySchedule,
        DropDownListDS,
        Modal,
    },
    props: {
        title: { type: String, default: "Schedule" },
        modalActive:Boolean,
        showOkButton : Boolean,
        showConfirmButton : Boolean,
        showCloseButton : Boolean,
        backgroundColor: String,
        showLoad : Boolean,
        confirmButtonText : { default : 'Delete', type: String},
        taskId: { default : '', type: String},
    },
    data: () => {
        return {
            load : true,
            typeScheduleList: [
                { text: 'Continuous', value: ScheduleType.Continuous},
                { text: 'Daily', value: ScheduleType.Daily},
                { text: 'Weekly', value: ScheduleType.Weekly},
                { text: 'Monthly', value: ScheduleType.Monthly},
                { text: 'Yearly', value: ScheduleType.Yearly},
            ],
            scheduleType: '',
            text: '',
            showContinuousSchedule: false,
            showDailySchedule: false,
            showMonthlySchedule: false,
            showWeeklySchedule: false,
            showYearlySchedule: false,
            showText: false,
            closeModalSchedule: false,
            taskService: {} as TaskService,
            tasks: [],
            scheduleData: {} as any,
            scheduleId: '',
        }
    },
    async mounted(){
        this.load = false;
        this.taskService = new TaskService();
        await this.taskService.getScheduleByTask(this.taskId).then((responseTask: any) => {
            if(responseTask.status == "200"){
                this.scheduleType = jsonUtilities.getJsonArrayEntrybyValue<Attribute>(responseTask.task.attributes, 'schedule_type').value;
                this.scheduleId = responseTask.task.id;
                this.selectchange(this.scheduleType);
                this.scheduleData = responseTask.task;
            }
        });
    },
    updated(){
        this.bodyOverflowModify();
    },
    methods: {
            bodyOverflowModify()
            {
                let body = document.body;
                if(this.modalActive){
                    body.classList.add("modal-open");
                }
                else{
                    body.classList.remove("modal-open");
                }
            },
            resetControls(){
                this.showContinuousSchedule = false;
                this.showDailySchedule = false;
                this.showMonthlySchedule = false;
                this.showWeeklySchedule = false;
                this.showYearlySchedule = false;
                this.showText = false;
            },
            save(text: string, status: string){
                console.log("Save");
                this.text = text;
                this.showText = true;
                if(status == '200'){
                    this.closeModalSchedule =  true;
                }
            },
            closeModalInfo(){
                console.log("closeModalInfo" );
                this.showText = false;
                if(this.closeModalSchedule){
                    this.closeModal();
                }
            },
            closeModal(){
                this.scheduleType = "select schedule type";
                this.resetControls();
                this.$emit("close");
            },
            okModal(){
                this.$emit("confirm");
            },
            selectchange(value: string){
                this.resetControls();
                this.scheduleType = value;
                switch(this.scheduleType){
                    case ScheduleType.Continuous: this.showContinuousSchedule = true; break;
                    case ScheduleType.Daily: this.showDailySchedule = true; break;
                    case ScheduleType.Weekly: this.showWeeklySchedule = true; break;
                    case ScheduleType.Monthly: this.showMonthlySchedule = true; break;
                    case ScheduleType.Yearly: this.showYearlySchedule = true; break;
                }
            }
        },
}
</script>
<style scoped>
.colorBackgroundModalDelete
{
    background:#b67f80
}
.colorBackgroundModalValidate
{
    background:#799f78
}
.show-modal
{
    display: block;
    padding-right: 17px;
}

.modal-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background-color: rgba(0, 0, 0, 0.3);
}
.modal-dialog {
    max-width: 560px;
    margin: 1.75rem auto;
}
</style>
