import * as $ from 'jquery';

class ArtboxBasket {
    private _items;
    private _language;
    private _defaults: Object = {
        language: 'ru',
        url: 'basket',
        initError: 'Basket cannot be init',
        modalSelector: '.basket_modal',
        cartSelector: '.basket_wrapper'
    };
    private _settings: Object = {};

    get items() {
        return this._items;
    }

    get language() {
        if (this._language === undefined) {
            let language_attr = $('html').attr('lang');
            if (language_attr !== undefined) {
                let language = language_attr.substr(0, 2);
                if (language.length == 2) {
                    this._language = language;
                } else {
                    this._language = this._settings['language'];
                }
            } else {
                this._language = this._settings['language'];
            }
        }
        return this._language;
    }

    constructor(settings: Object = {}) {
        this._settings = ArtboxBasket.mergeObjects(this._defaults, settings);
        this.init(true, true);
    }

    public init(update_modal, update_cart) {
        $.get('/' + this.language + '/' + this._settings['url'], function (data) {
            this._items = data.basket;
            if (update_modal) {
                this.updateModal(data.modal, false);
            }
            if (update_cart) {
                this.updateCart(data.cart);
            }
        }.bind(this), 'json').fail(function () {
            console.error(this._settings['initError']);
        }.bind(this));
    }

    public add(variant_id, count) {
        $.post('/' + this.language + '/' + this._settings['url'] + '/add?variant_id=' + variant_id + '&count=' + count, function (data) {
            this._items = data.basket;
            this.updateModal(data.modal, data.cart, true);
        }.bind(this), 'json').fail(function (xhr, status, error) {
            console.error(error);
        });
    }

    public set(variant_id, count) {
        $.post('/' + this.language + '/' + this._settings['url'] + '/set?variant_id=' + variant_id + '&count=' + count, function (data) {
            this._items = data.basket;
            this.updateModal(data.modal, data.cart, true);
        }.bind(this), 'json').fail(function (xhr, status, error) {
            console.error(error);
        });
    }

    public remove(variant_id) {
        $.post('/' + this.language + '/' + this._settings['url'] + '/remove?variant_id=' + variant_id, function (data) {
            this._items = data.basket;
            this.updateModal(data.modal, data.cart, true);
        }.bind(this), 'json').fail(function (xhr, status, error) {
            console.error(error);
        });
    }

    public updateModal(modal, cart_html, show = false) {
        let modalBox = $(this._settings['modalSelector']);
        modalBox.html(modal);
        if (cart_html) {
            this.updateCart(cart_html);
        }
        if (this.count < 1) {
            this.hideBasket();
        }
        if (show) {
            return show;
        }
    }

    public updateCart(cart_html) {
        let cart = $(this._settings['cartSelector']);
        cart.html(cart_html);
    }

    public hideBasket() {
        $(this._settings['modalSelector'])
            .animate(
                {
                    opacity: 0,
                    top: '0'
                }, 200, function () {
                    $(this)
                        .css('display', 'none');
                    $('#overlay')
                        .fadeOut(400);
                }
            );
    }

    get count(): number {
        return Object.keys(this._items).length;
    }

    private static mergeObjects(obj1: Object, obj2: Object): Object {
        let obj = {};
        for (let attribute in obj1) {
            obj[attribute] = obj1[attribute];
        }
        for (let attribute in obj2) {
            obj[attribute] = obj2[attribute];
        }
        return obj;
    }
}