import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { Equirment } from 'src/app/models/equirment.model';
import { ItemDetail } from 'src/app/models/ItemDetail.model';
import { RoomDetail } from 'src/app/models/RoomDetail.model';
import { MyRoom, Room } from 'src/app/models/rooms.model';
import { EquirmentService } from 'src/app/service/equirment.service';
import { RoomService } from 'src/app/service/room.service';
import { RoomDetailService } from 'src/app/service/room-detail.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-admin-equirment',
  templateUrl: './admin-equirment.component.html',
  styleUrls: ['./admin-equirment.component.scss']
})
export class AdminEquirmentComponent implements OnInit {
  myForm: FormGroup;
  time = { hour: 13, minute: 30 };


  closeResult = '';

  listEquirmentModel: Equirment[] = [];
  listRoomModel: Room[] = [];
  listItemDetail: ItemDetail[] = [];
  listRoomDetail: RoomDetail[] = [];

  listEquirmentModelEdit: Equirment | undefined;
  listRoomModelEdit: Room | undefined;

  page = 1;
  pageSize = 10;
  collectionSize = 0;

  pageListRoom = 1;
  pageSizeListRoom = 10;
  collectionSizeListRoom = 0;


  modelEquirment = new Equirment();
  modelRoom: Room
  modelItemDetail = new ItemDetail();
  modelRoomDetail = new RoomDetail();

  RoomForm = new FormGroup({
    rId: new FormControl(''),
    rName: new FormControl(''),
    rType: new FormControl(''),
    rPic: new FormControl(''),
    roomLimit: new FormControl(''),
    rDesc: new FormControl('')
  });

  constructor(private modalService: NgbModal, private equirmentService: EquirmentService, private roomService: RoomService, private RoomDetailService: RoomDetailService
    , private fb: FormBuilder) {
    console.log()
    this.RoomForm = this.fb.group({
      rName: ["",],
      rType: ["",],
      rDesc: ["",]
    });
    this.RoomForm.valueChanges.subscribe(console.log);
  }

  ngOnInit() {
    this.listEquirmentModel = this.equirmentService.getListEquirment();
    this.listRoomModel = this.roomService.getListRoom();
    this.collectionSizeListRoom = this.listRoomModel.length
    console.log("listRoom", this.listRoomModel)
  }

  bookEquir(editLend, item: Equirment) {

    this.modelItemDetail = new ItemDetail();
    this.modelItemDetail.equirment = item;
    console.log("item", this.modelItemDetail);

    this.modalService.open(editLend, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  bookRoom(editroom, item: Room) {

    // this.modelRoom = new MyRoom({
    //   "rId": 2,
    //   "rName": "ห้องคู่",
    //   "rType": "ห้อง",
    //   "rPic": "assets/img/room.jpg",
    //   "roomLimit": 50,
    //   "rDesc": "จำนวนคน 50 คน"
    // });
    // this.modelRoom = new MyRoom(item);
    console.log("room", this.modelRoom);

    this.modalService.open(editroom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      console.log("RESUT", result)
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      console.log("reason", reason)
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  addroom(contentroom,item : Room) {
    this.modelRoom = new MyRoom;
    this.modelRoom = item;
    this.modalService.open(contentroom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      console.log("RESUT", result)
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      console.log("reason", reason)
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  addequirment(contentequirment,item : Equirment) {
    this.modelEquirment = new Equirment;
    this.modelEquirment = item;
    this.modalService.open(contentequirment, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      console.log("RESUT", result)
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      console.log("reason", reason)
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  Eopen(contentequirment, index?: number) {
    this.index = index;
    let temp = {
      eqName: this.listEquirmentModel[this.index].eqName,
      eqType: this.listEquirmentModel[this.index].eqType,
      eqDesc: this.listEquirmentModel[this.index].eqDesc,
      eqId: this.listEquirmentModel[this.index].eqId,
      eqPic: this.listEquirmentModel[this.index].eqPic,
    }
    this.listEquirmentModelEdit = temp

    // this.modelEquirment = new Equirment();
    this.modalService.open(contentequirment, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
  index = -1;
  Ropen(contentroom, index?: number) {
    this.index = index;
    let temp = {
      rName: this.listRoomModel[this.index].rName,
      rType: this.listRoomModel[this.index].rType,
      rDesc: this.listRoomModel[this.index].rDesc,
      rId: this.listRoomModel[this.index].rId,
      rPic: this.listRoomModel[this.index].rPic,
      roomLimit: this.listRoomModel[this.index].roomLimit,
    }
    this.listRoomModelEdit = temp

    // this.modelRoom = new MyRoom();
    this.modalService.open(contentroom, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  openItemDetail(content: string, item: ItemDetail) {
    this.modelItemDetail = item;
    console.log(item);
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  openRoomDetail(content: string, item: RoomDetail) {
    this.modelRoomDetail = item;
    console.log(item);
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }


  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
  refreshCountries() {
    this.listEquirmentModel = this.listEquirmentModel
    this.listRoomModel = this.listRoomModel
      .map((item, i) => ({ id: i + 1, ...item }))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }

  NgbdTimepickerBasic() {

  }

  saveEquirment() {

    this.equirmentService.addEquirment(this.modelEquirment);
    this.modalService.dismissAll();
    this.ngOnInit();

  }

  saveRoom() {

    this.roomService.addRoom(this.modelRoom);
    this.modalService.dismissAll();
    this.ngOnInit();

  }

  editRoom() {
    this.roomService.editroom(this.modelRoom);
    this.modalService.dismissAll();
    this.ngOnInit();
  }

  onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.RoomForm.value);
  }
  updateRoomProfile() {
    let temp = {
      rName: this.listRoomModelEdit.rName,
      rType: this.listRoomModelEdit.rType,
      rDesc: this.listRoomModelEdit.rDesc,
      rId: this.listRoomModelEdit.rId,
      rPic: this.listRoomModelEdit.rPic,
      roomLimit: this.listRoomModelEdit.roomLimit,
    }
    this.listRoomModel[this.index] = temp
  }

  updateItemProfile() {
    let temp = {
      eqName: this.listEquirmentModelEdit.eqName,
      eqType: this.listEquirmentModelEdit.eqType,
      eqDesc: this.listEquirmentModelEdit.eqDesc,
      eqId: this.listEquirmentModelEdit.eqId,
      eqPic: this.listEquirmentModelEdit.eqPic,
    }
    this.listEquirmentModel[this.index] = temp
  }

}
