export default class DaterangePicker extends HTMLElement{


    constructor(dom_element = null)
    {
        super();
    }




    connectedCallback()
    {




        console.log('DateRange picker connected');




        var start = moment().subtract(29, "days");
        var end = moment();

        let context = this;

        let id = this.getAttribute('data-id');

        function cb(start, end, id) {
            $(`#` + id).html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
        }

        $("#" + context.getAttribute('data-id')).daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                "Today": [moment(), moment()],
                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                "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")]
            }
        }, cb);

        cb(start, end);





    }



}

customElements.define('daterange-picker', DaterangePicker);