import {Component, OnInit} from '@angular/core';

  import {VesselsService} from '../../service/vessels.service';

  import {Vessels} from '../../model/vessels';

  import {Vessel} from '../../model/vessel';
  import {SelectedVesselService} from '../../service/selected-vessel.service';

  declare var $: any;

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

    vessels: Vessels;

    selectedVessel: Vessel;

    constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) {

    }

    ngOnInit(): void {
      this.vesselsService.currentVessels.subscribe(vessels => {

        setTimeout(() =>
          this.vessels = vessels
        );

      });

      this.selectedVesselService.currentVessel.subscribe(selectedVessel => {
        this.selectedVessel = selectedVessel;
      });

      $(document).ready(() => {
        $('#myInput').on('keyup', function(): void {
          const value = $(this).val().toLowerCase();
          $('#list-tab a').filter(function(): void {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
          });
        });

      });
    }

    onSelectVessel(vessel: Vessel): void {
      this.selectedVesselService.changeVesselSet(vessel);
    }

  }