<template>
  <div :class="['vs-datepicker', { 'vs-datepicker--compact': isCompact }]">
    <label class="vs-datepicker__label">
      <span>{{ label }}</span>
      <span class="vs-datepicker--required" v-if="required"> *</span>
    </label>
    <date-picker
      v-model:value="selectedDate"
      :type="type"
      :input-class="classes"
      :value-type="valueType"
      :format="format"
      :id="id"
      :disabled="disabled"
      :editable="editable"
      :clearable="clearable"
      :range="range"
      :placeholder="placeholder"
      :lang="lang"
      v-bind="$attrs"
    >
    </date-picker>
  </div>
</template>

<script>
  import DatePicker from 'vue-datepicker-next';

  export default {
    name: 'VsDatepicker',

    components: {
      DatePicker,
    },

    props: {
      isError: {
        type: Boolean,
      },
      editable: {
        type: Boolean,
        default: false,
      },
      clearable: {
        type: Boolean,
        default: false,
      },
      isCompact: {
        type: Boolean,
        default: false,
      },
      required: {
        type: Boolean,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      label: {
        type: String,
        default: 'Date',
      },
      modelValue: {},
      max: {
        type: String,
        default: '',
      },
      min: {
        type: String,
        default: '',
      },
      id: {
        type: String,
      },
      format: {
        type: String,
        default: 'MM-DD-YYYY',
      },
      range: {
        type: Boolean,
        default: false,
      },
      type: {
        type: String,
        default: 'date',
      },
      placeholder: {
        type: String,
      },
      lang: {
        type: Object,
      },
      // EX: date, format, timestamp, or token like 'YYYY-MM-DD'
      valueType: {
        type: String,
        default: 'date',
      },
    },

    provide: {
      datepicker_prefixClass: 'vs',
    },

    computed: {
      /**
       * Classes added to datpicker
       * @returns {String}
       */
      classes() {
        return `vs-datepicker__input vs-datepicker__date ${this.isError ? 'vs-datepicker__input--error' : ''}`;
      },

      /**
       * set selected date based on v-model/props
       */
      selectedDate: {
        get() {
          return this.modelValue;
        },
        set(value) {
          this.$emit('update:modelValue', value);
        },
      },
    },

    methods: {
      disabledDates(date) {
        return date < new Date(this.min) || date > new Date(this.max);
      },

      // emitChange(value) {
      //   this.$emit('change', value);
      // },

      // emitOpen(value) {
      //   this.$emit('open', value);
      // },

      // emitClose(value) {
      //   this.$emit('close', value);
      // },
    },
  };
</script>

<style lang="scss">
  $el: '.vs-datepicker';

  $namespace: 'mx';
  $default-color: #555;
  $primary-color: #1f73b7;
  @import 'vue-datepicker-next/index.css';

  [data-theme='dark'] #{$el},
  .dark #{$el} {
    --vs-datepicker-bg: #1e1e1e;
    --vs-datepicker-border: #5c6970;
    --vs-datepicker-border-hover: #4ea8f5;
    --vs-datepicker-hover: #333333;
    --vs-datepicker-error: #ff6b72;
    --vs-datepicker-icon: #5c6970;
    --vs-datepicker-input: #ffffff;
    --vs-datepicker-label: #ffffff;
  }

  #{$el} {
    --primary-color: #1f73b7;
    --vs-datepicker-bg: #ffffff;
    --vs-datepicker-border: #d8dcde;
    --vs-datepicker-border-hover: #4ea8f5;
    --vs-datepicker-hover: #333333;
    --vs-datepicker-error: #ff6b72;
    --vs-datepicker-icon: rgb(0 0 0 / 50%);
    --vs-datepicker-input: #333;
    --vs-datepicker-label: #333;

    position: relative;
    width: 100%;

    &__label {
      line-height: 1.42857;
      color: var(--vs-datepicker-label);
      font-size: 14px;
      font-weight: 600;
      display: block;
      margin-bottom: 8px;
    }

    &__input {
      border: 1px solid var(--vs-datepicker-border);
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
      vertical-align: middle;
      font-family: inherit;
      padding: 0.714286em 0.857143em;
      min-height: 40px;
      line-height: 1.28571;
      font-size: 14px;
      background-color: var(--vs-datepicker-bg);
      color: var(--vs-datepicker-input);
      transition: border-color 0.25s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s,
        background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s;
      outline: none;
      display: flex;
      align-items: center;

      &:hover {
        border-color: var(--primary-color);
      }

      &:focus {
        border-color: var(--primary-color);
        box-shadow: rgb(31 115 183 / 35%) 0px 0px 0px 3px;
      }

      &--error {
        border-color: #cc3340;

        &:hover {
          border-color: #cc3340;
        }

        &:focus {
          border-color: #cc3340;
          box-shadow: rgb(31 115 183 / 35%) 0px 0px 0px 3px;
        }
      }
    }

    .mx-icon-calendar {
      color: var(--vs-datepicker-icon);
    }

    &--required {
      color: #cc3340;
    }

    &--compact {
      #{$el}__input {
        min-height: 32px;
        max-height: 32px;
      }
    }

    .disabled {
      #{$el}__input {
        background: #f8f9f9;
        color: #c2c8cc;
        cursor: no-drop;
        border-color: #e9ebed;
        user-select: none;
        &:hover {
          border-color: #e9ebed;
        }
      }
    }
  }

  [data-theme='dark'] .#{$namespace}-datepicker-main,
  .dark .#{$namespace}-datepicker-main {
    --vs-datepicker-bg: #1e1e1e;
    --vs-datepicker-border: #5c6970;
    --vs-datepicker-border-hover: #4ea8f5;
    --vs-datepicker-hover: #333333;
    --vs-datepicker-error: #ff6b72;
    --vs-datepicker-icon: #5c6970;
    --vs-datepicker-menu-bg: #1c2227;
    --vs-datepicker-menu-border: #39434b;
    --vs-datepicker-border-radius: 4px;
  }

  .#{$namespace}-datepicker-main {
    --vs-datepicker-primary-color: #1f73b7;
    --vs-datepicker-grey: #c2c8cc;
    --vs-datepicker-white: #ffffff;
    --vs-datepicker-black: #333333;
    --vs-datepicker-range-color: rgba(31, 115, 183, 0.08);
    --vs-datepicker-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
      Cantarell, Helvetica Neue, Arial, sans-serif;
    --vs-datepicker-bg: #ffffff;
    --vs-datepicker-border: #d8dcde;
    --vs-datepicker-menu-bg: #ffffff;
    --vs-datepicker-menu-border: #d8dcde;
    --vs-datepicker-border-radius: 4px;

    color: var(--vs-datepicker-input);
    font-feature-settings: 'kern', 'kern';
    -webkit-font-kerning: normal;
    font-kerning: normal;
    font-family: var(--vs-datepicker-font-family);
    background-color: var(--vs-datepicker-menu-bg);
    border-color: var(--vs-datepicker-border);
    border-radius: var(--vs-datepicker-border-radius);
    color: var(--vs-datepicker-input);

    .#{$namespace}-time {
      background-color: var(--vs-datepicker-menu-bg);
      border-radius: var(--vs-datepicker-border-radius);
    }

    .#{$namespace}-calendar {
      width: 275px;
      padding: 15px 15px;
    }

    .#{$namespace}-calendar-header {
      height: 40px;
      line-height: 30px;
    }

    .#{$namespace}-calendar-header-label {
      line-height: 10px;
    }

    .#{$namespace}-datepicker-sidebar + .#{$namespace}-datepicker-content {
      border-left: 1px solid var(--vs-datepicker-menu-border);
    }

    .#{$namespace}-calendar-content {
      .cell {
        color: var(--vs-datepicker-primary-color);
        &.active {
          color: var(--vs-datepicker-white);
          background-color: var(--vs-datepicker-primary-color);
        }
        &.disabled,
        &.not-current-month {
          color: var(--vs-datepicker-grey);
          background-color: transparent;
        }
        &.in-range {
          background-color: var(--vs-datepicker-range-color);
          background-color: rgba(31, 115, 183, 0.08);
        }
      }
      .#{$namespace}-table {
        th {
          font-size: 14px;
          font-weight: 600;
        }
        &.#{$namespace}-table-date td,
        &.#{$namespace}-table-date th {
          font-size: 13px;
        }
      }
    }
    .#{$namespace}-btn {
      font-feature-settings: 'kern', 'kern';
      -webkit-font-kerning: normal;
      font-kerning: normal;
      font-family: var(--vs-datepicker-font-family);
      color: var(--vs-datepicker-input);
      font-size: 14px;
      font-weight: 600;
      height: 30px;
    }
  }
</style>
