<template>
  <datepicker
    v-bind="{
      ...$attrs,
      ...$props,
      minimumView: viewType,
      maximumView: viewType,
      wrapperClass,
    }"
    calendar-class="tf-datepicker-container"
    v-on="$listeners"
  >
    <span
      slot="dayCellContent"
      slot-scope="{ cell }"
      :data-test="`datepicker day ${cell.date}`"
      class="custom-day"
      v-text="cell.date || ''"
    />
    <TfButton
      slot="prevIntervalBtn"
      data-test="datepicker previous"
      icon="angle-left"
      size="icon-no-fill"
      type="primary"
      no-border
    />
    <TfButton
      slot="nextIntervalBtn"
      data-test="datepicker next"
      icon="angle-right"
      size="icon-no-fill"
      type="primary"
      no-border
    />
  </datepicker>
</template>
<script>
  import Datepicker from '@sum.cumo/vue-datepicker/dist/Datepicker';

  export default {
    name: 'TfDatepicker',
    components: { Datepicker },
    inheritAttrs: false,
    props: {
      format: {
        type: String,
        default: 'MM/dd/yy',
      },
      value: {
        type: [String, Date],
        default: '',
      },
      viewType: {
        type: String,
        default: 'day',
        validator: (value) => ['day', 'month'].includes(value),
      },
    },
    computed: {
      /**
       * Set individual class names for styling purposes.
       *
       * @returns {object}
       */
      wrapperClass() {
        return {
          'tf-datepicker': true,
          'is-month-only': this.viewType === 'month',
          'is-day-only': this.viewType === 'day',
        };
      },
    },
  };
</script>

<style scoped lang="scss">
  @import 'src/assets/styles/variables';

  ::v-deep {
    input {
      height: 30px;
      border: 1px solid $tf-light-gray;
      border-radius: 2px;
      color: $tf-dark-gray;
      padding: 0 10px;
    }
  }
</style>

<style lang="scss">
  // This is an unscoped style block to account for appendToBody:true for <TfDatepicker />
  @import 'src/assets/styles/variables';

  /* stylelint-disable selector-max-compound-selectors */
  /* stylelint-disable max-nesting-depth  */
  .tf-datepicker-container.vdp-datepicker__calendar {
    flex-direction: row;
    justify-content: center;
    box-shadow: none;
    border-color: $tf-light-gray;
    z-index: 2001;

    .custom-day {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 31px;
      height: 31px;
      border: 1px solid transparent;
      border-radius: 100%;

      &:hover {
        border-color: $tf-blue;
        background: $tf-white;
      }
    }

    div {
      // Override all the cell data styles
      .cell {
        position: relative;
        font-size: 12px;

        &.day-header {
          color: $tf-light-gray;
        }

        &.disabled {
          color: $tf-light-gray;

          >.custom-day:hover {
            border: transparent;
          }
        }

        &.selected,
        &.selected:hover,
        &.selected.highlighted,
        &.highlight-start,
        &.highlight-end {
          background-color: transparent;

          &.month,
          .custom-day {
            /* stylelint-disable declaration-no-important */
            background-color: $tf-blue !important;
            color: $tf-white !important;
            /* stylelint-enable declaration-no-important */
          }
        }

        &.highlighted {
          background-color: transparent;

          &:after {
            position: absolute;
            height: 27px;
            top: calc(50% - 18px);
            left: -1px;
            right: -1px;
            background-color: $tf-light-blue;
            content: '';
          }

          &.highlight-end:after {
            right: 50%;
          }

          &.highlight-start:after {
            left: 50%;
          }
        }

        &.month {
          display: flex;
          align-content: center;
          justify-content: center;
          width: 166px;
          height: inherit;
          margin: 6px 10px;
          padding: 4px 0;

          font: {
            size: 14px;
            weight: 700;
          }

          color: $tf-blue;
          line-height: inherit;
          border-color: $tf-blue;
        }

        &.muted:not(.disabled):hover {
          border-color: transparent;
        }
      }

      .day:not(.muted):not(.disabled):hover {
        border-color: transparent;
      }

      &:not(.muted):not(.disabled) {
        .month:hover,
        .year:hover {
          /* stylelint-disable declaration-no-important  */
          border-color: $tf-dark-blue !important;
          /* stylelint-enable declaration-no-important  */
        }
      }
    }

    .picker-view {
      > div {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 100%;
      }

      header {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 0;
        line-height: 1;
        color: $tf-dark-blue;

        span {
          display: flex;
          float: none;
          width: auto;
        }

        .is-month-only &,
        .month__year_btn {
          justify-content: center;
        }

        .day__month_btn {
          flex: 2;
          margin: auto;
          justify-content: center;
          font-weight: 700;
          color: $tf-blue;
        }

        .is-day-only & {
          justify-content: space-between;
        }

        .month__year_btn {
          margin: 0 10px;
        }

        .next,
        .prev {
          &:not(.disabled):hover {
            background: transparent;
          }

          &:after {
            display: none;
          }
        }

        .next .tf-button {
          margin-left: auto;
        }

        .prev .tf-button {
          margin-right: auto;
        }
      }
    }

    .is-month-only & {
      width: 380px;
    }

    &,
    header {
      display: flex;
    }

    span.today {
      background: transparent;
      font-weight: 700;
    }
  }
</style>
