<template>
  <div class="vue-monthly-picker" :style="cssProps">
    <div :class="[$style.InputGroup, { errorNotice: validationError }]">
      <div :class="[$style.InputDate, $style.InputGroupsDateDrop]">
        <div :class="$style.calendarIconInput">
          <i class="saglan-icon-calendar"></i>
        </div>
        <input
          type="text"
          :value="displayText"
          :placeholder="placeHolder"
          @click="openMenu"
        />
      </div>
    </div>
    <transition name="fadePicker" mode="out-in">
      <div
        v-if="showMenu"
        class="basePicker"
        :style="{width: dropdownWidth + 'px'}"
      >
        <div class="monthly-picker" style="text-align: center">
          <div class="monthly-picker__header">
            <ul>
              <li @click="prevYear">
                <i class="saglan-icon-prev"></i>
              </li>
              <li @click="nextYear">
                <i class="saglan-icon-next"></i>
              </li>
            </ul>
          </div>
          <div class="monthly-picker__month-name">
            <div>{{ year }}</div>
          </div>
          <div class="flexbox monthItem">
            <template v-for="(month, idx) in monthLabels">
              <div
                class="item active"
                :class="{'monthly-picker__selected': isCurrentSelected(year, idx) }"
                v-if="isActive(idx)"
                @click="selectMonth(idx)"
                :key="idx"
              >
                {{ month }}
              </div>
              <div
                v-else
                :class="{ selected: isCurrentSelected(year, idx) }"
                :key="idx"
                class="item deactive"
              >
                {{ month }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "MonthlyPicker",
  props: {
    value: {
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inputClass: {
      default: "input"
    },
    placeHolder: {
      type: String,
      default: ""
    },
    alignment: {
      type: String,
      default: "left",
      validator: function(value) {
        // The value must match one of these strings
        return ["left", "right", "center"].indexOf(value) !== -1;
      }
    },
    monthLabels: {
      type: Array,
      default: function() {
        return ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sept", "Oct", "Nov", "Dic"];
      }
    },
    min: {
      default: null
    },
    max: {
      default: null
    },
    dateFormat: {
      type: String,
      default: "YYYY/MM"
    },
    clearOption: {
      type: Boolean,
      default: true
    },
    dropdownWidth: {
      type: Number,
      default: 200,
    },
    bgColor: {
      default: "#e9540d",
      type: String
    },
    validationError: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showMenu: false,
      year: moment().format("YYYY"),
      month: moment().format("MM")
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    value: function(value) {
      this.setValue(value);
    }
  },
  computed: {
    menuClass() {
      return {
        visible: this.showMenu,
        hidden: !this.showMenu
      };
    },
    menuStyle() {
      return {
        display: this.showMenu ? "block" : "none",
        left:
          this.alignment === "right"
            ? "100%"
            : this.alignment === "center"
            ? "50%"
            : "",
        transform:
          this.alignment === "right"
            ? "translate(-100%,0)"
            : this.alignment === "center"
            ? "translate(-50%,0)"
            : ""
      };
    },
    displayText() {
      if (this.value) {
        let valueMoment = null;
        if (typeof this.value === "string") {
          valueMoment = moment(this.value);
        } else {
          valueMoment = this.value;
          
        }
        if (valueMoment && valueMoment.isValid()) {
          return valueMoment.format(this.dateFormat);
        } else {
          return valueMoment;
        }
      } else {
        return this.placeHolder;
      }
    },
    canBack() {
      if (!this.min) return true;
      const currentVal = this.internalMomentValue.clone().startOf("year");
      return this.min.isBefore(currentVal);
    },
    canNext() {
      if (!this.max) return true;
      const currentVal = this.internalMomentValue.clone().endOf("year");
      return currentVal.isBefore(this.max);
    },
    internalMomentValue() {
      const yrMonth = this.year + "/" + this.month;
      return moment(yrMonth, "YYYY/MM");
    },
    cssProps() {
      let rgbColor = "";
      if (this.bgColor.indexOf("#") !== -1) {
        let aux = this.bgColor.replace('#', '')
        rgbColor =
          parseInt(aux.substring(0, 2), 16).toString() +
          ", " +
          parseInt(aux.substring(2, 4), 16).toString() +
          ", " +
          parseInt(aux.substring(4, 6), 16).toString();
      }
      return {
        "--color-primary": this.bgColor,
        "--color-primary-rgb": rgbColor,
      };
    },
  },
  methods: {
    init() {
      document.addEventListener(
        "click",
        e => {
          if (this.$el && !this.$el.contains(e.target)) {
            this.closeMenu();
          }
        },
        false
      );
      this.setValue(this.value);
    },
    openMenu() {
      if (!this.disabled) {
        this.showMenu = true;
      }
    },
    closeMenu() {
      this.showMenu = false;
    },
    prevYear() {
      if (!this.canBack) return;
      let newYear = parseInt(this.year) - 1;
      this.year = newYear.toString();
    },
    nextYear() {
      if (!this.canNext) return;
      let newYear = parseInt(this.year) + 1;
      this.year = newYear.toString();
    },
    selectMonth(idx) {
      this.month = (parseInt(idx) + 1).toString();
      this.selectPicker();
      this.closeMenu();
    },
    selectPicker() {
      this.$emit("input", this.internalMomentValue.clone());
      this.$emit("selected", this.internalMomentValue.clone());
    },
    setValue(value) {
      if (typeof value === "string") {
        value = moment(value);
      }
      if (value && value.isValid()) {
        this.month = value.format("MM");
        this.year = value.format("YYYY");
      }
    },
    isActive(idx) {
      let realMonth = idx + 1;
      const yrMonth =
        this.year + "/" + (realMonth < 10 ? "0" + realMonth : realMonth);
      if (this.min && moment(yrMonth, "YYYY/MM").isBefore(this.min)) {
        return false;
      }
      if (this.max && moment(yrMonth, "YYYY/MM").isAfter(this.max)) {
        return false;
      }
      return true;
    },
    isCurrentSelected(year, monthIdx) {
      if (!this.value) {
        return false;
      }
      let checkValue = this.value;
      if (typeof this.value === "string") {
        checkValue = moment(this.value);
      }
      if (checkValue && checkValue.isValid()) {
        const currentMonth = checkValue.format("MM");
        const currentYear = checkValue.format("YYYY");
        return (
          Number(currentMonth) === Number(monthIdx + 1) &&
          Number(currentYear) === Number(year)
        );
      }
      return false;
    },
    getBackgroundColor(year, monthIdx) {
      if (this.isCurrentSelected(year, monthIdx)) {
        return this.bgColor;
      }
    },
    clearSelect() {
      this.$emit("input", null);
      this.$emit("selected", null);
    }
  }
};
</script>

<style lang="scss" module>
@import "src/assets/custom/main.scss";
.InputGroup {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  .InputDate {
    width: 100%;
    position: relative;
    input[type="text"] {
      width: 100%;
      border: 1px solid $color-border;
      height: 36px;
      //font-size: 14px;
      outline: none;
      padding: 0 10px 0 35px;
    }
  }
  .InputGroupsDateDrop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    .calendarIconInput {
      font-size: 16px;
      position: absolute;
      left: 10px;
      top: 7px;
      color: var(--color-primary);
    }
  }
}
</style>

<style lang="scss">
$white: #fff;
$black: #000;
$lightgray: #ececec;
$primary-color: var(--color-primary);

.errorNotice {
  border: solid 1px #f79483 !important;
}

.vue-monthly-picker {
  .basePicker {
    background-color: $white;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    position: absolute;
    max-width: 100%;
    z-index: 999;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    box-shadow: 0 15px 30px 10px rgba($black, 0.08);
    transition: all 0.2s ease-in-out;
  }
  .monthly-picker {
    .next,
    .prev {
      &:hover {
        cursor: pointer;
      }
    }
    .monthItem {
      .item {
        border-top: 1px solid $lightgray;
        &.active {
          &:hover {
            cursor: pointer;
            background-color: $lightgray;
          }
        }
      }
    }
    .flexbox {
      padding: 0px;
      display: flex;
      flex-wrap: wrap;
      div {
        flex-grow: 1;
        padding: 15px 0;
      }
      .item {
        flex: 1;
        flex-basis: 25%;
      }
    }
    &__month-name {
      font-size: 16px;
      font-weight: 500;
      margin-top: -42px;
      margin-bottom: 12px;
      pointer-events: none;
      text-align: center;
    }
    &__header {
      margin-bottom: 15px;
      padding: 0 15px;
      margin-top: 15px;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        li {
          outline: none;
          display: block;
          padding: 5px 10px;
          font-weight: 500;
          border: solid 1px $primary-color;
          color: $primary-color;
          transition: all ease 0.3s;
          border-radius: 3px;
          &:hover {
            cursor: pointer;
            color: #ffffff;
            background-color: $primary-color;
          }
          i {
            font-size: 10px;
          }
        }
      }
    }
    &__selected{
      background-color: rgba(var(--color-primary-rgb), 0.6);
    }
  }
  .placeholder {
    color: #8b8b8b;
  }
  .date-popover {
    /*overflow-x: hidden;
    overflow-y: hidden;*/
    outline: none;
    max-width: 350px;
    width: 100%;
    border-radius: 0 0 0.28571429rem 0.28571429rem;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    background: #fff;
    transition: opacity 0.1s ease;
    position: absolute;
    margin: auto;
    z-index: 10;
    border: 1px solid $lightgray;
    //font-size: 1rem;
    font-weight: 200;
  }
  .month-picker-wrapper {
    position: relative;
    display: block;
    min-width: 200px;
  }
  .month-year-label {
    outline: none;
    .vmp-input-append {
      display: none;
    }
    &:hover .vmp-input-append {
      display: block;
    }
  }
  .text {
    position: relative;
    z-index: 2;
  }
  .month-year-display {
    &:hover {
      cursor: pointer;
    }
  }
  .next,
  .prev {
    width: 16%;
    float: left;
    text-indent: -10000px;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      border: 6px solid transparent;
    }
  }
  .next {
    &:after {
      border-left: 10px solid #000;
      margin-left: 5px;
    }
    &.deactive {
      &:hover {
        cursor: default;
      }
      &:after {
        border-left: 10px solid #999999;
      }
    }
  }
  .prev {
    &:after {
      border-right: 10px solid #000;
      margin-left: -5px;
    }
    &.deactive {
      &:hover {
        cursor: default;
      }
      &:after {
        border-right: 10px solid #999999;
      }
    }
  }
  .input {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: none;
    display: inline-flex;
    /*font-size: 1rem;*/
    height: 36px;
    justify-content: flex-start;
    line-height: 1.5;
    padding: 2px calc(0.625em - 1px);
    position: relative;
    vertical-align: top;
    background-color: #fff;
    border-color: #dbdbdb;
    color: #363636;
    box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
    max-width: 100%;
    width: 100%;
  }
  .deactive {
    color: #999999;
  }
  .selected {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    font-weight: 500;
  }
  .display-text {
    width: 100%;
  }
  .display-text-right {
    margin-right: 20px;
  }
  .vmp-input-append {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    padding: 6px;
  }
  .vmp-clear-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-style: normal;
    color: #555;
    text-align: center;
    cursor: pointer;
    &:before {
      display: inline-block;
      content: "\2716";
      vertical-align: middle;
    }
  }
}
</style>
