const LinksyDatePicker = {
  name: "LinksyDatePicker",
  props: {
    date: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    singleDatePicker: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dateValue: "",
      dateRanges: {
        "All Dates": [moment().subtract(1000, "years"), moment()],
        Today: [moment(), moment()],
        "Last 7 Days": [moment().subtract(6, "days"), moment()],
        "Last 30 Days": [moment().subtract(29, "days"), moment()],
        "This Month": [moment().startOf("month"), moment().endOf("month")],
        "Last Month": [
          moment().subtract(1, "month").startOf("month"),
          moment().subtract(1, "month").endOf("month"),
        ],
        "Last 3 Months": [
          moment().subtract(3, "month").startOf("month"),
          moment().subtract(1, "month").endOf("month"),
        ],
      },
    };
  },
  watch: {
    date(newValue) {
      this.handleDateOrValueChange(newValue);
      this.initializeDatePicker();
    },
    dateValue(newValue) {
      this.handleDateOrValueChange(newValue);
    },
  },
  methods: {
    onClear() {
      this.dateValue = "";
      jQuery(this.$refs.datePickerInput).attr("placeholder", this.singleDatePicker ? "No Date" : "All Dates");
      jQuery(this.$refs.datePickerInput).val("");
    },
    handleDateOrValueChange(newValue) {
      if (newValue) {
        if (!this.singleDatePicker) {
          for (const key in this.dateRanges) {
            if (this.dateRanges.hasOwnProperty(key)) {
              const range = this.dateRanges[key];
              if (
                moment(newValue.split(" - ")[0]).isSame(range[0], "day") &&
                moment(newValue.split(" - ")[1]).isSame(range[1], "day")
              ) {
                jQuery(this.$refs.datePickerInput).attr("placeholder", key);
                break;
              }
            }
          }
        }
      } else {
        this.onClear();
      }
      this.$emit("input", newValue);
    },
    initializeDatePicker() {
      const datePickerInput = this.$refs.datePickerInput;
      const config = {
        opens: "left",
        autoUpdateInput: false,
        locale: {
          cancelLabel: "Clear",
          format: DateParser.parse(LINKSY.date_format),
        },
      };

      if (this.singleDatePicker) {
        config.singleDatePicker = true;
        config.startDate = this.date || moment();
        config.locale.format = 'YYYY-MM-DD'
      } else {
        config.ranges = this.dateRanges;
      }

      jQuery(datePickerInput)
        .daterangepicker(config)
        .on("apply.daterangepicker", (ev, picker) => {
          if (this.singleDatePicker) {
            jQuery(datePickerInput)
              .val(picker.startDate.format('YYYY-MM-DD'))
              .trigger("change");
            this.dateValue = picker.startDate.format("YYYY-MM-DD");
          } else {
            jQuery(datePickerInput).val(picker.chosenLabel).trigger("change");
            this.dateValue =
              picker.startDate.format("YYYY-MM-DD") +
              " - " +
              picker.endDate.format("YYYY-MM-DD");
          }
        })
        .on("cancel.daterangepicker", () => {
          this.onClear();
        });
    },
  },
  template: `
        <div>
            <input type="text"
                class="daterangepickerinput pub-date"
                ref="datePickerInput"
                :placeholder="singleDatePicker ? 'No Date' : 'All Dates'"
                :value="singleDatePicker ? date : ''"
                :disabled="disabled"
                readonly
            />
        </div>
    `,
  mounted() {
    if (this.date) {
      this.dateValue = this.date;
    }

    this.initializeDatePicker();
  },
};
