<template>
  <div>
    <div class="grid-2-col top-margin-medium">
      <div 
        v-for="(schedule, index) in schedules" 
        :key="index"
        class="col-lg horizontal-no-padding" 
      >
        <transition name="items">
          <base-card class="padding-medium h-full flex-column-between" v-if="schedule.schedule_id">
            <div>
              <span class="text-dark-opacity text-medium text-bold text-break-word">{{ schedule.name }}</span>

              <div class="grid-2-col top-margin-medium">
                <div v-for="(item, key) in formatedData(schedule)" :key="key">
                  <span class="visible-block text-small text-dark-opacity">{{ item.title }}</span>
                  <span class="text-bold text-break-word text-small text-dark-opacity">{{ item.info }}</span>
                </div>
              </div>

              <template v-if="schedule.notes && schedule.notes !== ''">
                <div class="top-margin-small">
                  <span class="visible-block text-small text-dark-opacity">Observações:</span>
                  <span class="text-bold text-break-word text-small text-dark-opacity" v-text="limitText(schedule.notes, 100)" />
                </div>
              </template>
            </div>

            <div class="top-margin-large flex flex-row gap-2 justify-start items-center">
              <base-button 
                apperance="success" 
                square 
                size="medium" 
                class="w-120px" 
                @click.native="showEditModal = true, schedule_active_id = schedule.schedule_id"
              >
                Editar
              </base-button>
              <base-button 
                apperance="error" 
                square 
                size="medium" 
                class="w-120px" 
                @click.native="showDeleteModal = true, schedule_active_id = schedule.schedule_id"
              >
                Remover
              </base-button>
            </div>        
          </base-card>
        </transition>
      </div>
    </div>

    <schedule-edit 
      v-if="showEditModal" 
      :scheduleID="schedule_active_id" 
      :showEditModal="showEditModal" 
      @callbackEditModal="handleShowEditModal"
    />

    <schedule-delete 
      v-if="showDeleteModal"
      :scheduleID="schedule_active_id" 
      :showDeleteModal="showDeleteModal"
      @callbackDeleteModal="handleShowDeleteModal"  
    />
  </div>
</template>

<script>
import store from "@components/Schedule/storeSchedule.js";

export default {
  name: 'ScheduleItem',
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "Basebutton" */ '@elements/BaseButton/index.vue'),
    ScheduleEdit: () => import(/* webpackChunkName: "ScheduleEdit" */ '@components/Schedule/ScheduleEdit/index.vue'),
    ScheduleDelete: () => import(/* webpackChunkName: "ScheduleDelete" */ '@components/Schedule/ScheduleDelete/index.vue'),
  },
  data() {
    return {
      showEditModal: false,
      showDeleteModal: false,
      schedule_active_id: 0,
    };
  },
  computed: {
    schedules() {
      return store.state.schedules.slice().reverse();
    },
  },
  methods: {
    formatedData(actuallySchedule) {
      const { status, type, date_start, date_end, time_start, time_end, work_on_weekend, interval_to_meet, interval_for_lunch_status, interval_for_lunch } = actuallySchedule;

      const infos = [
        {
          title: 'Status:',
          info: status == 1 ? 'Ativo' : 'Inativo',
        },
        {
          title: 'Tipo de agenda:',
          info: type,
        },
        {
          title: 'Data inicio:',
          info: this.convertDates(date_start),
        },
        {
          title: 'Data fim:',
          info: this.convertDates(date_end),
        },
        {
          title: 'Horário inicial:',
          info: this.convertTime(time_start),
        },
        {
          title: 'Horário final:',
          info: this.convertTime(time_end),
        },
        {
          title: 'Trabalha de fim de semana:',
          info: work_on_weekend ? 'Sim' : 'Não',
        },
        {
          title: 'Intervalo entre reuniões:',
          info: interval_to_meet + ' minutos',
        },
      ]

      if (interval_for_lunch_status == 1) {
        infos.push({
          title: 'Pausa de uma hora para o almoço iniciando ás:',
          info: this.convertTime(interval_for_lunch),
        })
      }
      return infos
    },
    limitText(text, maxLength) {
      if (text.length > maxLength) {
        return text.substring(0, maxLength) + '...';
      }
      return text;
    },
    convertTime(current_time) {
      const [hours, minutes, seconds] = current_time.split(':');
      const timeFormatted = `${hours}:${minutes}`;

      return timeFormatted;
    },
    convertDates(current_date) {
      if (current_date.indexOf('/') != -1) return current_date; 
      const [day, month, year] = current_date.split('-').reverse();
      const dateFormatted = `${day}/${month}/${year}`;
      return dateFormatted;
    },
    handleShowDeleteModal(showModalValue) {
      this.showDeleteModal = showModalValue;
    },
    handleShowEditModal(showModalValue) {
      this.showEditModal = showModalValue;
    }, 
  },
};
</script>

<style scoped>
.grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: .75rem;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.relative {
  position: relative;
}

.justify-start {
  justify-content: flex-start;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.h-full {
  height: 100%;
}

.w-120px {
  width: 7.5rem;
}

.items-enter-active {
  transition: all 1s ease-in;
}

.items-leave-active {
  transition: all 1s ease-out;
}

.items-enter { 
  transform: translateY(20px) !important;
  opacity: 0;
}

.items-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>