<template>
  <section>
    <h4>Date Picker</h4>
    <div class="datepicker-container">
      <div class="input-container">
        <ElForm label-width="104px">
          <ElFormItem
            label="Select a date"
            class="date-picker-input"
          >
            <ElInput
              v-model="formattedDateValue"
              placeholder="Select a date"
              suffix-icon="search"
              @change="onformattedDateValueChange"
            />
          </ElFormItem>
        </ElForm>
      </div>
      <div class="week-picker">
        <p class="date-picker-input">
          Quick Select:
        </p>
        <ul>
          <li>
            <TfButton
              size="text"
              type="primary"
              @click="changeDueDate(14)"
            >
              In 2 weeks
            </TfButton>
          </li>
          <li>
            <TfButton
              size="text"
              type="primary"
              @click="changeDueDate(21)"
            >
              In 3 weeks
            </TfButton>
          </li>
          <li>
            <TfButton
              size="text"
              type="primary"
              @click="changeDueDate(28)"
            >
              In 4 weeks
            </TfButton>
          </li>
          <li>
            <TfButton
              size="text"
              type="primary"
              @click="changeDueDate(35)"
            >
              In 5 weeks
            </TfButton>
          </li>
        </ul>
      </div>
      <div class="datepicker-calendar">
        <datepicker
          v-model="dateValue"
          :disabled-dates="disabledDates"
          :inline="true"
          calendar-class="calendar_content"
        />
        <div class="button-today">
          <TfButton
            size="text-small"
            type="primary"
            @click="changeDueDate(0)"
          >
            Back to Today
          </TfButton>
        </div>
      </div>
    </div>
    <hr>
    <div class="flex">
      <div>
        <h2>Month Selection</h2>
        <TfDatePicker
          v-model="selectedDay"
          v-bind="{ viewType: 'month' }"
        />
      </div>
      <div>
        <h2>Day Selection</h2>
        <TfDatePicker v-model="selectedMonth" />
      </div>
    </div>
  </section>
</template>

<script>

  export default {
    name: 'DataPicker',
    data: () => ({
      dateValue: '',
      formattedDateValue: '',
      disabledDates: {
        to: new Date(),
      },
      selectedDay: null,
      selectedMonth: null,
      selectedHighlight: {
        from: '',
        to: '',
      },
    }),
    watch: {
      /**
       * When the datevalue changes we need to update the 'formatted' date
       */
      dateValue() {
        const date = new Date(this.dateValue);
        this.formattedDateValue = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
      },
    },
    created() {
      // since we have a "back to today" button, I figured
      // it was best to not disable today's date
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      this.disabledDates.to = yesterday;
    },
    methods: {
      /**
       * Handling a date change from the ElInput field
       *
       * @param {string} formattedDateValue
       */
      onformattedDateValueChange(formattedDateValue) {
        const valid = this.$TF.DatesUtils.isDateValid(formattedDateValue);
        if (valid) {
          this.dateValue = new Date(formattedDateValue);
        } else {
          const date = new Date(this.dateValue);
          const month = date.getMonth() + 1;
          this.formattedDateValue = `${month}/${date.getDate()}/${date.getFullYear()}`;
        }
      },
      /**
       * Change the date from the quick select
       *
       * @param {number} days
       */
      changeDueDate(days) {
        const date = new Date();
        this.dateValue = date.setDate(date.getDate() + days);
      },
    },
  };
</script>

<style scoped lang="scss">
.date-picker-container {
  width: 557px;
  margin: 0 auto;
  text-align: left;
}

section {
  text-align: center;
  padding-bottom: 39px;
}

li {
  padding: 10px 0;
}

:v-deep span.cell.day-header {
  display: inline;
}

.button-today {
  position: absolute;
  margin-top: -25px;
  margin-left: 25px;
  font-size: 12px;

  .tf-button {
    font-weight: 600;
  }
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 30px;
}
</style>
