import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';
import { LightgalleryModule } from 'lightgallery/angular/13';
import { BeforeSlideDetail } from 'lightgallery/lg-events';
import { YourtripComponent } from '../yourtrip/yourtrip.component';

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

  trip: Object = null;
  tripId: number;
  mainActivityTypeName = "";
  mobile: boolean = false;
  mainActivityType: object;
  tripSummary: Object[] = [];
  mainActivityTypePictures: Object[] = [];
  picturesLoaded: boolean = false;

  settings = {
    counter: false,
  };
  onBeforeSlide = (detail: BeforeSlideDetail): void => {
    const { index, prevIndex } = detail;
    console.log(index, prevIndex);
  };



  constructor(private route: ActivatedRoute,
    private db: DbConnectionService,
    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 => {

      if (r["tripId"]) {
        this.tripId = Number(r["tripId"]);
        // this.fetchDayByDayView()
      }
      // error handling
      if (!r["activitytype"])
        return alert("Invalid activitytype");


      this.mainActivityTypeName = r['activitytype']

    })
    this.fetchMainActivityTypeDetails();
    this.fetchMainActivityTypePictures()
  }


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

  fetchMainActivityTypePictures() {
    this.db.executeQuery(`SELECT * FROM MainActivityTypePicture WHERE mainActivityType = "${this.mainActivityTypeName}"`).then(r => {
      this.mainActivityTypePictures = r["data"]
    })
    this.picturesLoaded = true
  }

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

  createActivity() {
    this.db.executeQuery(`SELECT persons FROM Trip WHERE tripID=${this.tripId}`).then(r1 => {
      let persons = r1["data"][0]["persons"];
      console.log(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"];
        console.log(date)

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

        // })
      })
    })
  }



}