import { Component, OnInit, ViewChild } from "@angular/core";
import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-huddle',
  templateUrl: './huddle.component.html',
  styleUrls: ['./huddle.component.scss']
})
export class HuddleComponent implements OnInit {
  @ViewChild("content") content;
  @ViewChild("activeStory") video;
  users = [
    {
      name: "Jan",
      image: "https://www.supercardating.com/doc/image.rhtm/profile-pic2.jpg",
      submit_time: 1601655386668,
      story_link: "https://erjb.s3.nl-ams.scw.cloud/ttk_beagle.mp4"
    },
    {
      name: "Bob",
      image:
        "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.4oYqJqInuQd2TAlPPdggLgHaHa%26pid%3DApi&f=1",
      submit_time: null,
      story_link: "https://erjb.s3.nl-ams.scw.cloud/ttk_golden.mp4"
    },
    {
      name: "Angela",
      image:
        "https://writestylesonline.com/wp-content/uploads/2019/01/What-To-Wear-For-Your-Professional-Profile-Picture-or-Headshot.jpg",
      submit_time: 1601655386668,
      story_link: "https://erjb.s3.nl-ams.scw.cloud/ttk_frenchie.mp4"
      }
  ];
  selectedUser;

  constructor(private modalService: NgbModal) {}

  ngOnInit() {
    
  }

  playStory(user) {
    if (!user.submit_time || !user.story_link) {
      return;
    }
    this.modalService.open(this.content, { centered: true });
    this.selectedUser = user;
  }

  prevUser(modal: NgbModalRef) {
    let index: number = this.users.findIndex(
      (u) => u.name === this.selectedUser.name
    );
    if (index < 1) {
      modal.close();
      return;
    }
    while (
      !this.users[index - 1].story_link ||
      !this.users[index - 1].submit_time
    ) {
      index--;
      if (index === 0) {
        modal.close();
        return;
      }
    }
    this.selectedUser = this.users[index - 1];
  }

  nextUser(modal: NgbModalRef) {
    let index: number = this.users.findIndex(
      (u) => u.name === this.selectedUser.name
    );
    if (index === -1 || index === this.users.length - 1) {
      modal.close();
      return;
    }
    while (
      !this.users[index + 1].story_link ||
      !this.users[index + 1].submit_time
    ) {
      if (index === -1 || index === this.users.length - 1) {
        modal.close();
        return;
      }
      index++;
    }
    this.selectedUser = this.users[index + 1];
  }
}