import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

interface EquirmentModel {
  id: number;
  name: string;
  desc: string;
  type: string;
  pic: string;
}

@Component({
  selector: 'app-equipment',
  templateUrl: './equipment.component.html',
  styleUrls: ['./equipment.component.scss']
})
export class EquipmentComponent implements OnInit {
  page = 1;
  pageSize = 10;

  closeResult = '';

  listEquirment: EquirmentModel[] = [
    {
      id: 1,
      name: "จอคอมพิวเตอร์",
      desc: "หน้าจอขนาด 22 นิ้ว",
      type: "it",
      pic: "assets\img\mo1.jpg"
    },
    {
      id: 2,
      name: "เมาส์",
      desc: "...",
      type: "it",
      pic: "assets\img\mou.jpg"
    },
    {
      id: 3,
      name: "โน๊ตบุ๊ค",
      desc: "หน้าจอขนาด 20 นิ้ว",
      type: "it",
      pic: "assets\img\notebook.jpg"
    },
    {
      id: 4,
      name: "คีย์บอร์ด",
      desc: "...",
      type: "it",
      pic: "assets\img\keyboard.png"
    }
  ]
  collectionSize = this.listEquirment.length;

  constructor(private modalService: NgbModal) { }

  ngOnInit(): void {
  }

  open(content) {
    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.listEquirment = this.listEquirment
      .map((item, i) => ({ id: i + 1, ...item }))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }
}