import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';
import { catchError, map, tap } from 'rxjs/operators';


interface Activity {
   activityValues: string;
   mapNumber: number;
   name: string;
   picture: string;
   status: string;
}

@Component({
   selector: 'app-activitieslist',
   templateUrl: './activitieslist.component.html',
   styleUrls: ['./activitieslist.component.scss']
})
export class ActivitieslistComponent implements OnInit {

   tripId: number;
   activities = [];
   categoryvalues = [];
   selected: number;
   mobile: boolean = false;

   constructor(
      private route: ActivatedRoute,
      private db: DbConnectionService,
      private location: Location,
      private router: Router
   ) { }
   // filteredActivities = () => {

   // }

   // getSelectedValues() {
   //   return this.activities.
   // }


   ngOnInit(): void {

      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
         this.mobile = true
      }

      this.route.params.subscribe(r => {
         this.selected = -1;
         // error handling
         if (!r["tripId"] || isNaN(Number(r["tripId"])))
            return alert("Invalid TripID");
         // extract tripID and activity from url
         this.tripId = Number(r["tripId"])

         this.fetchActivities();
         this.fetchCategories();
      });
   }

   fetchActivities() {
      // fetch Activities
      this.db.executeQuery(`SELECT * FROM MainActivityTypesView WHERE status = 'ACTIVE'`).then(r => {
         // set data
         this.activities = r["data"];
         this.selected = 0; //default selected to first
         console.log(this.activities)
      });

   }

   //ToDo: filter
   fetchCategories() {
      // fetch Categories
      this.db.executeQuery(`SELECT * FROM CategoryValue`).then(r => {
         // set data
         r["data"].forEach(x => {
            if (x.category in this.categoryvalues)
               this.categoryvalues[x.category].push({ value: x.name, checked: false })
            else
               this.categoryvalues[x.category] = [{ value: x.name, checked: false }]
         });
      });
      console.log(this.categoryvalues)
   }

   updateChecked(key, value) {
      console.log(this.categoryvalues)
      console.log(key)
      console.log(value)
      for (const item of this.categoryvalues[key]) {
         if (item.value === value) {
            item.checked = true;
            console.log(this.categoryvalues)
            return;
         }
      }
      this.filteredActivities();
   }

   selectedCategories: string[] = [];

   filteredActivities(): Activity[] {
         return this.activities.filter(activity => {
            // For each category, check if the activity value matches the selected value for that category
            return Object.keys(this.selectedCategories).every(category => {
              const selectedValue = this.selectedCategories[category];
              if (selectedValue !== null) {
                const activityCategories = activity.activityValues.split(', ');
                return activityCategories.includes(selectedValue);
              } else {
                return true; // if no value is selected, include all activities
              }
            });
          });
   }

   // toggleCategorySelection(category: string) {
   //    if (this.selectedCategories.includes(category)) {
   //       this.selectedCategories = this.selectedCategories.filter(c => c !== category);
   //    } else {
   //       this.selectedCategories.push(category);
   //    }
   // }
   toggleCategorySelection(category: string, value: string) {
      if (this.selectedCategories[category] === value) {
         // If the selected value is the same as the current value, deselect the category
         this.selectedCategories[category] = null;
       } else {
         // Otherwise, select the new value for the category
         this.selectedCategories[category] = value;
       }
      console.log(this.selectedCategories)
    }

   selectActivity(activity) {
      // if (this.selected < 0)
      //    return;
      // let activity = this.activities[this.selected];

      // Fetch person amount
      // this.db.executeQuery(`SELECT persons FROM Trip WHERE tripID=${this.tripId}`).then(r1 => {
      //    let persons = r1["data"][0]["persons"];

      //    // fetch recommended nights of mainactivity
      //    // this.db.executeQuery(`SELECT recommendedNights FROM MainActivityType WHERE name="${activity['name']}"`).then(r2 => {
      //    //    let nights = r2["data"][0]["recommendedNights"];

      //       // fetch next available date
      //       this.db.executeQuery(`SELECT endDate FROM ((SELECT tripID, startDate as endDate, 'ARRIVAL' as name FROM Trip) UNION (SELECT tripID, DATE_ADD(startDate, INTERVAL nights DAY) as endDate, mainActivityType as name FROM MainActivity)) AS T WHERE tripID=${this.tripId} ORDER BY endDate DESC LIMIT 1`).then(r3 => {
      //          let date = r3["data"][0]["endDate"];

      // create new Activity with default values
      // this.db.executeQuery(`INSERT INTO MainActivity (tripID, mainActivityType, persons, startDate) VALUES (${this.tripId}, '${activity['name']}', ${persons}, '${date}')`).then(r => {
      // redirect with mainActivityID
      // this.router.navigateByUrl(`trip/${this.tripId}/activity/${r["data"].insertId}`);
      this.router.navigateByUrl(`trip/${this.tripId}/activitytype/${activity['name']}`);
      // })
      // })

      // })
      // })

   }

   back() {
      // go to previous page
      this.location.back();
   }



}