<template>
  <base-card class="padding-medium">
    <template v-if="hasOrderSchedule">

      <span class="top-margin-medium text-dark-opacity text-medium text-bold text-break-word">Agendamento</span>

      <div class="width-fit background-success padding-x-small rounded-large top-margin-x-small">
        <span class="text-success text-bold text-x-small">{{ status }}</span>
      </div>

      <div class="flex start-xs gap-4 vertical-margin-medium">
        <div v-for="item, index in formatedData(schedule)" :key="index">
          <div class="flex-col">
            <p class="text-dark-opacity text-x-small text-bold">{{ item.title }}</p>
            <p class="text-dark-opacity text-small">{{ item.info }}</p>
          </div>
        </div>
      </div>

      <slot></slot>

    </template>
    <template v-else>
      <div class="flex start-xs middle-xs gap-1 bottom-margin-medium">
        <i class="fas fa-exclamation-triangle text-warning" />
        <span class="text-warning text-medium text-bold ">Atenção</span>
      </div>

      <p class="bottom-margin-medium text-dark-opacity text-small">Este pedido não contém agendamento. Consulte os
        horários disponíveis pelo botão abaixo</p>

      <slot></slot>

    </template>
  </base-card>
</template>

<script>
export default {
  name: 'ScheduleCustomer',
  props: {
    hasOrderSchedule: {
      type: Boolean,
      default: false
    },
    schedule: {
      type: Array,
      default: [],
    }
  },
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
  },
  computed: {
    status() {
      return this.schedule[0].status == 1 ? 'Confirmado' : 'Cancelado';
    },
  },
  methods: {
    formatedData(dataForm) {
      const infos = [
        {
          title: 'Data fim',
          info: this.convertDates(dataForm[0].date),
        },
        {
          title: 'Horário inicial',
          info: this.convertTime(dataForm[0].time),
        },
        {
          title: 'Tipo da reunião',
          info: dataForm[0].type,
        }
      ]

      return infos;
    },
    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;
    },
  },
}
</script>
