import { Component, OnInit } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { SupabaseAuthUser } from '@supabase/supabase-js';
import { Subject } from 'rxjs';
import { take, takeUntil, map } from 'rxjs/operators';
import { Channel } from '../api/supabase/channel';
import { ChannelService } from '../api/supabase/channel.service';
import { Message } from '../api/supabase/message';
import { MessageService } from '../api/supabase/message.service';
import { SupaService } from '../api/supabase/supa.service';
import { User } from '../api/supabase/user';
import { UserService } from '../api/supabase/user.service';

@Component({
  selector: 'app-channel',
  templateUrl: './channel.component.html',
  styleUrls: ['./channel.component.scss']
})
export class ChannelComponent implements OnInit {
  channel: Channel;
  member: User[] = [];
  messages: Message[] = [];
  $destroy: Subject<boolean> = new Subject();
  dataUpdated: boolean = false;
  messageInput: string = '';

  constructor(
    private channelService: ChannelService,
    private modalService: NgbModal,
    private supaService: SupaService,
    private route: ActivatedRoute,
    private sanitizer: DomSanitizer,
    private userService: UserService,
    private router: Router,
    private messageService: MessageService,
   ) { }

  ngOnInit() {
    this.route.params.subscribe(
      params => {
        this.reset();
        if (params.id) {
          this.channelService.getOne(params.id).subscribe(
            data => {
              console.log('got channel', data);
              this.channel = data;
              this.loadMessages(data.id).subscribe(messages => {
                this.messages = messages;
              });
              // for (let i = 0; i < 100; i++) {
              //   this.messages.push(new Message(params.id, 'demo', 'hola'))
              // }
            },
            error => {
              console.error(error);
              this.router.navigateByUrl('/dashboard');
            }
          )
        }
      }
    )
  }

  ngOnDestroy() {
    this.$destroy.next(true);
    this.$destroy.complete();
  }

  reset() {
    delete this.channel;
    this.member = [];
    this.messages = [];
    this.messageInput = '';
    this.$destroy.next(true);
  }

  loadChannel(id: number) {
    return this.channelService.getOne(id).pipe(takeUntil(this.$destroy.asObservable()));
  }

  loadMessages(channel_id: number = this.channel.id) {
    return this.messageService.getMessages(channel_id).pipe(
      takeUntil(this.$destroy.asObservable()),
      map((messages: Message[]) => {
        messages.forEach((message: Message) => this.userService.getOne(message.user_id).subscribe(user => message.user = user));
        return messages;
      })
    );
  }

  async sendMessage(text: string) {
    if (!this.channel || !text) {
      return;
    }
    const user: SupabaseAuthUser = await this.supaService.client.auth.user();
    const message = new Message(this.channel.id, user.id, text);
    this.messageService.addOne(message).pipe(take(1)).subscribe(
      data => {
        console.log('Success', data);
      },
      error => {
        console.error('Failed', error);
      }
    );
  }

  updateChannel(name:string, desc:string) {
    this.channel.name = name;
    this.channel.description = desc;
    this.channelService.updateOne(this.channel).pipe(take(1)).subscribe(
      data => {
        console.log('Success', data);
      },
      error => {
        console.error('Failed', error);
      }
    );
  }

  deleteChannel() {
    const check = confirm('Do you want to delete this channel?'); 
    if (check == true) {
      this.channelService.deleteOne(this.channel).subscribe(
        data => {
          console.log('Deleted channel', data);
          this.router.navigateByUrl('/dashboard');
        },
        error => console.error(error)
      );
    }
  }

}