<script setup>
    import { Qalendar } from 'qalendar';
    import data from '../data/events.json';
    import {eventStatusLoad} from '../helpers/status';
    import {getDateTime} from '../helpers/date_formats';
    import { onMounted, ref } from 'vue';
    import { useRouter } from 'vue-router';
    const events = ref([]);
    const router = useRouter();
    const config = {
      week: {
        startsOn: 'monday',
        // Takes the values 5 or 7.
        nDays: 7,
        // Scroll to a certain hour on mounting a week. Takes any value from 0 to 23.
        // This option is not compatible with the 'dayBoundaries'-option, and will simply be ignored if custom day boundaries are set.
        scrollToHour: 0,
      },
      month: {
        showTrailingAndLeadingDates: false
      },
      style: {
        fontFamily: 'Nunito',
        colorSchemes: {
            meetings: {
              color: "#fff",
              backgroundColor: "#131313",
            },
            sports: {
              color: "#fff",
              backgroundColor: "#ff4081",
            },
        },
      },
      eventDialog:{
          isCustom: true
      },
      defaultMode: 'month',
      isSilent: true,
    //   showCurrentTime: true, // Display a line indicating the current time 
    }

    onMounted(() => {
        data.forEach((e, i) => {
            const indicator = eventStatusLoad(e.status);
            const dateStart = getDateTime(e.date, 0);
            const dateEnd = getDateTime(e.date, 1);
            events.value.push({
                id: i,
                title: e.shipment_code,
                // isEditable: true,
                // isCustom: true,
                with: indicator.status,
                description: indicator.status,
                color: indicator.color,
                time: {
                    start: dateStart,
                    end: dateEnd
                }
            })
        });
    });

    const redirectToTracking = (code) => {
        router.push({
            name: 'tracking-load',
            params: {code}
        });
    }

</script>

<template>
    <div>
        <h2 class="title mb-4">Calendario</h2>
        <div class="box-indicators">
            <h2>Indicadores de estado de la carga</h2>
            <div class="indicators">
                <i class="fa-solid fa-circle" style="color: yellow"></i> Publicado
                <i class="fa-solid fa-circle" style="color: green"></i> Cargando
                <i class="fa-solid fa-circle" style="color: red"></i> En transito
                <i class="fa-solid fa-circle" style="color: blue"></i> Descargando
                <i class="fa-solid fa-circle" style="color: blue"></i> Entregado
            </div>
        </div>
        <div class="calendar">
        <!-- <div class="calendar is-light-mode"> -->
            <Qalendar
                :events="events"
                :config="config"
            >
                <template #eventDialog="props">
                    <div v-if="props.eventDialogData && props.eventDialogData.title" class="event-modal">
                        <h2>Información del status de la carga</h2>
                        <!-- <p>Código de carga: <span :style="{color: props.eventDialogData.color}">{{props.eventDialogData.title}}</span></p> -->
                        <p>
                            Código de carga: 
                            <span> {{props.eventDialogData.title}}</span>
                            <span 
                                class="tracking-icon" 
                                :style="{color: props.eventDialogData.color}"  
                                @click="redirectToTracking(props.eventDialogData.title)">
                                <svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                                    <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                                </svg>
                            </span>
                        </p>
                        <p>Estatus de la carga: <i :style="{color: props.eventDialogData.color}" class="fa-solid fa-circle"></i> <span>{{props.eventDialogData.with}}</span></p>

                        <button class="btn btn-dark" @click="props.closeEventDialog">
                            Cerrar
                        </button>
                    </div>
                </template>
            </Qalendar>
        </div>
    </div>
</template>

<style src="qalendar/dist/style.css"></style>

<style lang="scss" scoped>
    .calendar {
        height: calc(100vh - 220px);
    }

    .tracking-icon {
        cursor: pointer;
        color: #f2a23f;
    }

    .tracking-icon svg{
        height: 30px;
    }
    .tracking-icon:hover {
        color: #ddb380;;
        height: 150px;
    }

    .tracking-icon svg:hover{
        height: 33px;
    }

    .event-modal {
        padding: 12px 20px;
        display: flex;
        flex-direction: column;
    }

    .event-modal h2 {
        color: rgb(208, 182, 182);
        font-family: sans-serif;
        font-size: 1.4rem;
        font-weight: 900;
        margin-bottom: 2rem;
    }
    
    .event-modal p {
        color: rgb(208, 182, 182);
        font-family: sans-serif;
        font-size: 1rem;
        font-weight: 700;
    }

    .box-indicators {
        display: flex;
        justify-content: end;
        flex-direction: column;
        padding: 12px 10px;
    }
    
    .box-indicators h2 {
        display: flex;
        justify-content: end;
        font-weight: 600;
        font-size: 1.2rem;
    }

    .indicators {
        display: flex;
        justify-content: end;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    @media (max-width: 768px) {
        .calendar {
            height: calc(100vh - 280px);
        }
    }

</style>