<template>
  <div :class="$style.wrapper">
    <div :class="$style.visorGeneral" @click="openDisplay">
      <i class="icon-clock"></i>
      <div :class="$style.hour">
        <span>{{ selectedHour }}</span>
      </div>
      <div :class="$style.separador" v-html="delimiter"></div>
      <div :class="$style.minutes">
        <span>{{ selectedMinute }}</span>
      </div>
    </div>
    <div :class="$style.optionsSelected" v-if="showDisplayOptions" @click.stop>
      <div :class="$style.selectedHour">
        <small v-html="valueHour"></small>
        <ul>
          <li
            v-for="(hour, index) in hours"
            :key="index"
            @click="handleHour(hour, index)"
            :class="{ selectedActive: index == activeIndexHour }"
          >
            {{ hour }}
          </li>
        </ul>
      </div>
      <div :class="$style.selectedMinutes">
        <small v-html="valueMinute"></small>
        <ul>
          <li
            v-for="(minute, index) in minutes"
            :key="index"
            @click="handleMinute(minute, index)"
            :class="{ selectedActive: index == activeIndexMinute }"
          >
            {{ minute }}
          </li>
        </ul>
      </div>
    </div>
    {{ selectedMinute }}
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      selectedHour: this.initialHour.h,
      selectedMinute: '00',
      newMinute: 0,
      activeIndexHour: null,
      activeIndexMinute: null,
      showDisplayOptions: false,
    };
  },
  props: {
    delimiter: {
      type: String,
      default: ":",
    },
    valueHour: {
      type: String,
      default: "HH",
    },
    valueMinute: {
      type: String,
      default: "mm",
    },
    hours: {
      type: Array,
    },
    minutes: {
      type: Array,
    },
    interval: {
      type: Object,
      default: function () {
        return {
          h: 1,
          m: 10,
        };
      },
    },
    initialHour: {
      type: Object,
      default: function () {
        return {
          h: moment().format("HH"),
          m: 10,
        };
      },
    },
  },
  created() {
    let minuto = moment().format("mm");

    switch (true) {
      case minuto > 0 && minuto <= 10:
        this.newMinute = 10;
        break;
      case minuto > 10 && minuto <= 20:
        this.newMinute = 20;
        break;

      case minuto > 20 && minuto <= 30:
        this.newMinute = 30;
        break;

      case minuto > 30 && minuto <= 40:
        this.newMinute = 40;
        break;

      case minuto > 40 && minuto <= 50:
        this.newMinute = 50;
        break;

      case (minuto > 50 && minuto <= 59) || minuto == 0:
        this.newMinute = "00";
        break;

      default:
        break;
    }
  },
  methods: {
    handleHour(hour, index) {
      this.selectedHour = hour;
      this.activeIndexHour = index;
    },
    handleMinute(minute, index) {
      this.selectedMinute = minute;
      this.activeIndexMinute = index;
    },
    openDisplay() {
      this.$emit("hide-calendar");
      this.showDisplayOptions = true;
      setTimeout(() => document.addEventListener("click", this.close), 0);
    },
    close() {
      this.showDisplayOptions = false;
      setTimeout(() => document.removeEventListener("click", this.close));
    },
  },
};
</script>

<style lang="css">
.selectedActive {
  border-bottom: solid 2px #e9540d;
  color: #e9540d;
}
</style>

<style lang="scss" module>
.wrapperClock {
  margin-left: -2px;
  min-width: 80px;
  position: relative;
  .visorGeneral {
    display: flex;
    height: 28px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    padding: 5px 10px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #000;
    i {
      margin-right: 5px;
      color: #e9540d;
      font-size: 12px;
    }
    .hour,
    .minutes {
      display: flex;
      align-items: center;
      flex-direction: column;

      span {
        font-size: 14px;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }

  .optionsSelected {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    display: flex;
    right: 0;
    box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
    margin-top: -1px;
    .selectedHour,
    .selectedMinutes {
      text-align: center;
      ul {
        list-style: none;
        margin: 0;
        max-height: 200px;
        padding: 0;
        overflow-y: scroll;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */

        &::-webkit-scrollbar {
          display: none;
        }

        li {
          padding: 10px 20px;
          font-size: 12px;
          &:hover {
            color: #e9540d;
            cursor: pointer;
          }
        }
      }

      small {
        color: rgb(146, 146, 146);
        font-size: 12px;
        margin-bottom: -20px;
      }
    }
  }
}
</style>