import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Mall, Outlet, MenuItem, MallService } from '../services/mall.service';

@Component({
    selector: 'app-outlet-details',
    templateUrl: './outlet-details.page.html',
    styleUrls: ['./outlet-details.page.scss'],
})
export class OutletDetailsPage implements OnInit {
    mall_details: Mall;
    outlet_details: Outlet;
    temp_outlet_details: Outlet;
    show_top_bar: boolean = false;
    show_only_veg: boolean = false;
    selected_tag: string = null;
    selected_description: string = null;
    show_sort_popup: boolean = false;
    selected_sort: string = null;

    constructor(
        private route: ActivatedRoute,
        private location: Location,
        private mallService: MallService,
    ) { }

    ngOnInit() {
        let mall_id = this.route.snapshot.paramMap.get('mall_id');
        let outlet_id = this.route.snapshot.paramMap.get('outlet_id');

        this.mallService.getMallByID(mall_id).then((data: Mall) => {
            this.mall_details = data;
            this.outlet_details = this.mall_details.outlets.find((outlet) => outlet.id === outlet_id);
            this.temp_outlet_details = JSON.parse(JSON.stringify(this.outlet_details));
        });
    }

    back() {
        this.location.back();
    }

    onScroll(event: any) {
        if (event.detail.scrollTop > 100) {
            this.show_top_bar = true;
        } else {
            this.show_top_bar = false;
        }
    }

    calculateDiscount(price: number, discount: number) {
        return price - (price * discount / 100);
    }

    toggleBookmark() {
        this.outlet_details.is_bookmarked = !this.outlet_details.is_bookmarked;
    }


    filterByTag(tag: string) {
        if (this.selected_tag === tag) {
            this.selected_tag = null;
            this.temp_outlet_details.menu_items = JSON.parse(JSON.stringify(this.outlet_details.menu_items));
        } else {
            this.selected_tag = tag;
            let menu_items: Array<MenuItem> = [];
            for (let i = 0; i < this.outlet_details.menu_items.length; i += 1) {
                if (this.outlet_details.menu_items[i].tags.includes(tag)) {
                    menu_items.push(this.outlet_details.menu_items[i]);
                }
            }
            this.temp_outlet_details.menu_items = menu_items;
        }
    }

    sortBy(type: string) {
        this.selected_sort = type;
        switch(this.selected_sort) {
            case 'name': this.temp_outlet_details.menu_items.sort(function(a, b){
                if(a.name < b.name) { return -1; }
                if(a.name > b.name) { return 1; }
                return 0;
            });
            break;
            case 'rating': this.temp_outlet_details.menu_items.sort(function(a, b){
                if(a.rating < b.rating) { return -1; }
                if(a.rating > b.rating) { return 1; }
                return 0;
            }).reverse();
            break;
            case 'price': this.temp_outlet_details.menu_items.sort(function(a, b){
                if(a.price < b.price) { return -1; }
                if(a.price > b.price) { return 1; }
                return 0;
            });
            break;
            case 'duration': this.temp_outlet_details.menu_items.sort(function(a, b){
                if(a.wait_duration < b.wait_duration) { return -1; }
                if(a.wait_duration > b.wait_duration) { return 1; }
                return 0;
            });
            break;
        }
    }

    togglePopup() {
        this.show_sort_popup = !this.show_sort_popup;
    }

}