import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';

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

   noLastDayActivity: Object = {
      name: 'empty',
      description: "You can leave the last day of the activity empty. This way, you can fill this day with with a"
   }

   tripId: number;
   activityId: number;
   @Input() mainActivity: Object|null = null;
   mainActivityType: Object;
   dayActivityTypes: Object[] = [];
   transportOptions: Object[] = [];
   trip: Object = null;
   tripSummary: Object[] = [];
   mobile: boolean = false;

   loading: boolean = true;
   editMode: boolean = false; // changes action buttons

   form = new FormGroup({
      startDate: new FormControl<Date | null>(null),
      transport: new FormControl<string | null>(null),
      personAmount: new FormControl<number | null>(null),
      numberOfNights: new FormControl<number | null>(null),
      comment: new FormControl<string | null>(null),
   });

   activityDates: Date[] = [];
   selectedDayActivities: string[][] = [];

   constructor(private route: ActivatedRoute,
      private db: DbConnectionService,
      private fb: FormBuilder,
      private router: Router) { }


   ngOnInit(): void {

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

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

         this.fetchMainActivityDetails();
      });
      this.route.queryParams.subscribe(r => {
         this.editMode = Boolean(r["edit"])
      })
   }

   cancelMainActivity() {
      // Delete All DayActivities linked to MainActivity and delete MainActivity
      this.db.executeQuery(`DELETE FROM DayActivity WHERE activityID=${this.activityId}`).then(r => {
         this.db.executeQuery(`DELETE FROM MainActivity WHERE activityID=${this.activityId}`).then(r2 => {
            this.router.navigateByUrl(`/trip/${this.tripId}/activities`);
         })
      })

   }

   fetchMainActivityDetails() {
      this.db.executeQuery(`SELECT * FROM MainActivity WHERE activityID=${this.activityId}`).then(r => {
         this.mainActivity = r["data"][0];
         this.form.patchValue({
            'startDate': new Date(this.mainActivity['startDate']),
            'transport': this.mainActivity['transport'],
            'personAmount': this.mainActivity['persons'],
            'numberOfNights': this.mainActivity['nights'],
            'comment': this.mainActivity['comment']
         });
         this.fetchThisActivityView();

         this.form.get("startDate").valueChanges.subscribe(newStartDate => {

            this.db.executeQuery(`DELETE FROM DayActivity WHERE activityID=${this.activityId}`).then(_ => {
               this.selectedDayActivities = this.selectedDayActivities.map(_ => []);
            })

            // Update DB
            this.db.executeQuery(`UPDATE MainActivity SET startDate = '${this.toMysqlDate(newStartDate)}' WHERE activityID=${this.activityId}`).then(_ => {
               this.fetchThisActivityView();
            })
         })

         this.form.get("transport").valueChanges.subscribe(newTransport => {
            // Update DB
            this.db.executeQuery(`UPDATE MainActivity SET transport = '${newTransport}' WHERE activityID=${this.activityId}`).then(_ => {
               this.fetchThisActivityView();
            })
         })

         this.form.get("personAmount").valueChanges.subscribe(newPersonAmount => {
            // Update DB
            this.db.executeQuery(`UPDATE MainActivity SET persons = ${newPersonAmount} WHERE activityID=${this.activityId}`).then(_ => {
               this.fetchThisActivityView();
            })
         })

         this.form.get("numberOfNights").valueChanges.subscribe(newNights => {
            if (newNights < this.activityDates.length-1) { // decreased nr of nights
               for (let i = this.activityDates.length - 1; i > newNights; i--)
                  // delete all dayActivities on date
                  this.db.executeQuery(`DELETE FROM DayActivity WHERE activityID=${this.activityId} AND date='${this.toMysqlDate(this.activityDates[i])}'`)
               this.activityDates = this.activityDates.splice(0, newNights+1)
               this.selectedDayActivities = this.selectedDayActivities.splice(0, newNights+1)
            } else if (newNights >= this.activityDates.length){ // increased nr of nights
               let newDays = newNights - this.activityDates.length + 1;
               for(let i = 1; i <= newDays; i++){
                  this.activityDates.push(this.addDays(this.activityDates[this.activityDates.length-1], 1));
                  this.selectedDayActivities.push([]);
               }
            }

            //this.fetchDayByDayView();

            // Update DB
            this.db.executeQuery(`UPDATE MainActivity SET nights = ${newNights} WHERE activityID=${this.activityId}`).then(r => {
               this.fetchThisActivityView();
            })
            
         })

         this.fetchMainActivityTypeDetails();
         this.fetchDayActivityTypes();
         this.fetchDayActivities();
         this.fetchTripInfo();
         // this.fetchDayByDayView();
         this.fetchTransport();
      })
   }

   fetchTransport() {
      this.db.executeQuery(`SELECT * FROM Transport_MainActivityType WHERE mainActivityType='${this.mainActivity['mainActivityType']}' ORDER BY createdAt`).then(r => {
         let transportOptions = r["data"];
         if (!this.mainActivity["transport"] && transportOptions.length === 1)
            this.form.patchValue({ 'transport': transportOptions[0]['transport'] })
         if (transportOptions.length > 1)
            this.transportOptions = transportOptions;
      })
   }

   fetchMainActivityTypeDetails() {
      this.db.executeQuery(`SELECT * FROM MainActivityType WHERE name="${this.mainActivity['mainActivityType']}"`).then(r => {
         this.mainActivityType = r["data"][0];
         
      })
   }

   fetchDayActivityTypes() {
      this.db.executeQuery(`SELECT D.* FROM MainActivityType_DayActivityType AS M INNER JOIN DayActivityType AS D ON M.dayActivityType=D.name WHERE mainActivityType="${this.mainActivity['mainActivityType']}" AND D.status = "ACTIVE" order by isDefault desc, name`).then(r => {
         this.dayActivityTypes = r["data"];
      })
   }

   // fetch chosen day activities
   async fetchDayActivities() {
      let activityDates = [];
      let selectedDayActivities = [];
      for(let i = 0; i < this.form.value.numberOfNights+1; i++){
         let d = this.addDays(this.form.value.startDate, i);
         activityDates.push(d);
         const r =  await this.db.executeQuery(`SELECT dayActivityType FROM DayActivity WHERE ActivityID=${this.activityId} AND date='${this.toMysqlDate(d)}'`)
         selectedDayActivities.push(r["data"].map(x => x.dayActivityType));
      }
      this.activityDates = activityDates;
      this.selectedDayActivities = selectedDayActivities;
   }

   isDayActivitySelected(dateIndex, dayActivity){
      return this.selectedDayActivities[dateIndex].includes(dayActivity.name)
   }

   async dayActivityChange(dateIndex, dayActivity, checkboxValue){
      if (checkboxValue){ // add day activity
         await this.db.executeQuery(`INSERT INTO DayActivity (activityID, dayActivityType, date) VALUES (${this.activityId}, '${dayActivity.name}', '${this.toMysqlDate(this.activityDates[dateIndex])}')`)
         this.selectedDayActivities[dateIndex].push(dayActivity.name);
      } else { // delete day activity
         await this.db.executeQuery(`DELETE FROM DayActivity WHERE activityID=${this.activityId} AND dayActivityType='${dayActivity.name}' AND date='${this.toMysqlDate(this.activityDates[dateIndex])}'`)
         this.selectedDayActivities[dateIndex] = this.selectedDayActivities[dateIndex].filter(x => x !== dayActivity.name)
      }
      this.fetchThisActivityView();
   }


   /* appendNewDayActivity() {
      let d = this.activities.length > 0 ? this.addDays(this.activities.at(-1).value["date"], 1) : this.form.value["startDate"];
      this.appendDayActivity(d, null, null);

   } */

   // appendNothingActivity() {
   //    let d = this.activities.length > 0 ? this.addDays(this.activities.at(-1).value["date"], 1) : this.form.value["startDate"];
   //    this.appendActivity(d, this.noLastDayActivity['name'], null);
   // }

   fetchThisActivityView() {
      this.db.executeQuery(`SELECT * FROM ThisActivityView WHERE activityID=${this.activityId}`).then(r => {
         //need to include the active activity
         let editMainActivity = r["data"][0]
         this.mainActivity['price'] = editMainActivity['totalPrice'];
         this.mainActivity['startDate'] = editMainActivity['startDate'];
         this.mainActivity['nights'] = editMainActivity['nights'];
         this.mainActivity['persons'] = editMainActivity['persons'];
         
         // this.mainActivity['dayActivities'] = r["data"][0]['dayActivities'];
         // console.log(r["data"][0])
      })
   }

   fetchTripInfo() {
      this.db.executeQuery(`SELECT startDate, endDate, persons FROM Trip WHERE tripID=${this.tripId}`).then(r => {
         this.trip = r["data"][0];
      })
   }

   fetchDayByDayView() {
      this.db.executeQuery(`SELECT * from DayByDayView WHERE tripID=${this.tripId}`).then(r => {
         this.tripSummary = r["data"];
      })
   }

   myRange(min: number, max: number) {
      return [...Array(max + 1).keys()].splice(min)
   }

   async confirmActivity() {
      if (this.form.value['comment'])
         // console.log(`UPDATE MainActivity SET comment='${this.form.value['comment']}' WHERE activityID=${this.activityId}`)
      await this.db.executeQuery(`UPDATE MainActivity SET comment='${this.form.value['comment']}' WHERE activityID=${this.activityId}`)
      //instert activity price into HistoricPriceTable
      await this.db.executeQuery(`INSERT INTO HistoricPrice (mainActivityID, price) VALUES (${this.activityId}, (select totalPrice from TotalPriceView where activityID = ${this.activityId}));`)
         
      if (this.form.value['numberOfNights'] === 0) {
         // Navigate to itinerary page
         this.router.navigateByUrl(`/trip/${this.tripId}/activities`);
      }
      else {
         // Navigate to Accomodation Page
         this.router.navigateByUrl(`/trip/${this.tripId}/accommodation/${this.activityId}`);
      }
   }

   addDays(date, days: number) {
      let result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
   }

   // js date to mysql date (fixes 1 day off bug)
   toMysqlDate(date) {
      date.setHours(12)
      return date.toISOString().split('T')[0];
   }

   getDayNr(date: Date) {
      return this.dateDiffInDays(new Date(this.trip["startDate"]), date);
   }

   dateDiffInDays(a: Date, b: Date) {
      // Discard the time and time-zone information.
      const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
      const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
      const _MS_PER_DAY = 1000 * 60 * 60 * 24;
      return Math.floor((utc2 - utc1) / _MS_PER_DAY);
   }

}