var VPJadwalLibur = (function () {
    return {
        name: "jadwal-libur",
        props: ['id',],
        template: `
            <div :id="id" ref="jadwal-libur"></div>

            <div class="modal fade" ref="modal"  tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <div class="modal-content card-style">
                <div class="modal-header px-0 border-0">
                    <h5 class="text-bold">Pintasan</h5>
                    <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                    <i class="lni lni-cross-circle"></i>
                    </button>
                </div>
                <div class="modal-body px-0">
                    <div class="content">
                        <form @submit.prevent="save()">
                            <div class="input-style-1">
                                <label>Judul</label>
                                <input required v-model="title" type="text" placeholder="Judul">
                            </div>
                            <div class="select-style-1">
                                <label>Jenis Libur</label>
                                <div class="select-position">
                                    <select required v-model="is_nasional">
                                        <option value="1">Libur Nasional/Sekolah</option>
                                        <option value="0">Bukan Libur Nasional</option>
                                    </select>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary" >Simpan</button>
                        </form>
                    </div>
                </div>
                </div>
            </div>
            </div>
        `,
        data() {
            return {

                title: null,
                is_nasional: 0,
                tanggal: null,
                isEventDelete: false,
                eventClick: false,
                mdl: null,
                calendar: {
                    instance: null,
                    events: [],
                },
            }
        },
        mounted() {

            this.initCalendar();
        },
        methods: {
            initCalendar() {
                this.calendar.instance = new FullCalendar.Calendar(this.$refs['jadwal-libur'], {
                    timeZone: timezone,
                    customButtons: {
                        syncLibur: {
                            text: 'Sinkronisasi Libur',
                            click: () => {
                                Swal.fire({
                                    title: 'Pilih Jenis Libur',
                                    showDenyButton: true,
                                    showCancelButton: true,
                                    confirmButtonText: 'Minggu & Libur Nasional',
                                    denyButtonText: `Sabtu,Minggu & Libur Nasional`,
                                    cancelButtonText: `Libur Nasional Saja`,
                                }).then((result) => {
                                    let url = window.location.href + '/sinkronisasi_libur';
                                    if (result.isConfirmed) url = url + "?j=6d";
                                    if (result.isDenied) url = url + "?j=5d";
                                    if (!(result.dismiss === Swal.DismissReason.cancel) && !result.isConfirmed && !result.isDenied) return;
                                    showDismisableLoading("Memuat Data");
                                    axios({
                                        method: 'GET',
                                        url,
                                    }).then((response) => {
                                        this.calendar.instance.refetchEvents();
                                        return Swal.fire("Berhasil", response.data.message || "Berhasil memuat data", 'success');
                                    }, (err) => {
                                        return Swal.fire("Gagal", gaem(error), 'error')
                                    });
                                })
                            }
                        }
                    },
                    headerToolbar: {
                        left: 'syncLibur',
                        center: 'title',
                    },
                    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                    // the initial locale. of not specified, uses the first one
                    locale: 'id',
                    initialView: 'dayGridMonth',
                    eventSources: [
                        {
                            events: (fetchInfo, successCallback, failureCallback) => {
                                axios({
                                    method: 'GET',
                                    url: window.location.href + '/all?nasional=yes',
                                }).then((response) => {
                                    successCallback(response.data.map(v => {
                                        v.allDay = true;
                                        v.display = 'background';
                                        return v;
                                    }));
                                }, (err) => {
                                    failureCallback(err);
                                });
                            },
                            color: 'red',
                        },
                        {
                            events: (fetchInfo, successCallback, failureCallback) => {
                                axios({
                                    method: 'GET',
                                    url: window.location.href + '/all?nasional=no',
                                }).then((response) => {
                                    successCallback(response.data.map(v => {
                                        v.allDay = true;
                                        v.display = 'background';
                                        return v;
                                    }));
                                }, (err) => {
                                    failureCallback(err);
                                });
                            },
                            color: 'grey',
                        },
                    ],
                    eventClick: (event) => {
                        this.eventClick = true;
                        if (!event.jsEvent.shiftKey) {
                            this.isEventDelete = true;
                            axios({
                                method: 'DELETE',
                                data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, id: event.event.id },
                                url: window.location.href + '/delete',
                            }).then((response) => {
                                this.calendar.instance.refetchEvents();
                            }, (err) => {
                                return Swal.fire("Gagal", "Ada masalah saat menghubungi server", 'error')
                            });
                        }
                    },
                    dateClick: (calEvent) => {
                        if (this.isEventDelete) {
                            this.eventClick = false;
                            this.isEventDelete = false;
                            return;
                        } showDismisableLoading();
                        if (!this.isEventDelete && !this.eventClick && calEvent.jsEvent.shiftKey) {
                            this.title = "Libur";
                            this.tanggal = calEvent.dateStr;
                            this.is_nasional = "1";
                            return this.save();
                        }
                        axios({
                            method: 'GET',
                            url: window.location.href + '/detail?tanggal=' + calEvent.dateStr,
                        }).then((response) => {
                            this.modal('show')
                            Swal.close();
                            this.tanggal = calEvent.dateStr;
                            if (!response.data.data) return
                            this.title = response.data.data.title;
                            this.is_nasional = response.data.data.is_nasional || 0;
                        }, (err) => {
                            return Swal.fire("Gagal", "Ada masalah saat menghubungi server", 'error')
                        });
                        this.isEventDelete = false;
                        this.eventClick = false;
                    },
                });
                this.calendar.instance.render();
            },
            save() {
                if (!this.tanggal) return;
                axios({
                    method: 'PATCH',
                    data: {
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value,
                        title: this.title,
                        tanggal: this.tanggal,
                        is_nasional: this.is_nasional,
                    },
                    url: window.location.href + "/save",
                }).then((response) => {
                    this.calendar.instance.refetchEvents();
                    Swal.close();
                    this.modal('hide')
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            modal(e = 'show') {
                if (!this.mdl) {
                    this.mdl = new bootstrap.Modal(this.$refs.modal);
                }
                switch (e) {
                    case "hide":
                        this.mdl.hide();
                        break;
                    case "show":
                        this.mdl.show();
                        break;
                    case "toggle":
                        this.mdl.toggle();
                        break;
                    case "dispose":
                        this.mdl.instance.dispose();
                        break;
                }
            }
        },
    }
})();
