import ngModule from '../module';
import Section from 'salix/components/section';
import './style.scss';

class Controller extends Section {
    constructor($element, $) {
        super($element, $);

        const draggable = this.element.querySelector('.travel-list');
        draggable.addEventListener('dragstart',
            event => this.dragStart(event));
        draggable.addEventListener('dragend',
            event => this.dragEnd(event));

        this.draggableElement = 'a[draggable]';
        this.droppableElement = 'vn-table[vn-droppable]';

        const scopeDays = 14;
        const landedFrom = new Date();
        landedFrom.setHours(0, 0, 0, 0);

        const landedTo = new Date();
        landedTo.setDate(landedTo.getDate() + scopeDays);
        landedTo.setHours(23, 59, 59, 59);

        this.defaultFilter = {
            landedFrom: landedFrom,
            landedTo: landedTo,
            continent: 'AM'
        };
    }

    findDraggable($event) {
        const target = $event.target;
        const draggable = target.closest(this.draggableElement);

        return draggable;
    }

    findDroppable($event) {
        const target = $event.target;
        const droppable = target.closest(this.droppableElement);

        return droppable;
    }

    dragStart($event) {
        const draggable = this.findDraggable($event);
        draggable.classList.add('dragging');

        const id = parseInt(draggable.id);
        this.entryId = id;
        this.entry = draggable;
    }

    dragEnd($event) {
        const draggable = this.findDraggable($event);
        draggable.classList.remove('dragging');
        this.entryId = null;
        this.entry = null;
    }

    onDrop($event) {
        const model = this.$.model;
        const droppable = this.findDroppable($event);
        const travelId = parseInt(droppable.id);

        const currentDroppable = this.entry.closest(this.droppableElement);

        if (currentDroppable == droppable) return;

        if (this.entryId && travelId) {
            const path = `Entries/${this.entryId}`;
            this.$http.patch(path, {travelFk: travelId})
                .then(() => model.refresh())
                .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
        }
    }

    changeReference(travel) {
        const params = {ref: travel.ref};
        const endpoint = `Travels/${travel.id}`;
        this.$http.patch(endpoint, params)
            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
    }

    save(id, data) {
        const endpoint = `Travels/${id}`;
        this.$http.patch(endpoint, data)
            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
    }
}

ngModule.vnComponent('vnTravelExtraCommunity', {
    template: require('./index.html'),
    controller: Controller
});