import { Component, ViewEncapsulation } from '@angular/core';
import { EsbService, Browser, EsbRightPadPipe, EsbLeftPadPipe, EsbImageAnimationConfig } from 'global-esb-common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {


  browser: Browser;
  /**
     * left-right panel multiple select
     */
  itemsLeft: Array<any>;
  selectedItemsRight: Array<any>;

  watchedRightItems: Array<any>;

  imgDataSource: any;
  imgDataConfig: any;


  constructor(private esbLeftPadPipe: EsbLeftPadPipe, private esbRightPadPipe: EsbRightPadPipe, private esbService: EsbService) {

    this.browser = this.esbService.getBrowser();
    const rightPadResult = this.esbRightPadPipe.transform('rightPad', 15, "X");
    console.log(rightPadResult);
    const leftPadResult = this.esbLeftPadPipe.transform('leftPad', 15, 'X');
    console.log(leftPadResult);
  }

  ngOnInit() {

    this.imgDataSource = {
      images: ['assets/slide-img1.jpg',
        'assets/slide-img2.jpg',
        'assets/slide-img3.jpg'],
      tooltips: [
        '',
        `<div class="tooltipdemo1">
         <div>共用區_架構準則規範區</div>
        <div>包含了 Angular及Angular RTC包版規範文件如下</div>
        <div>C105_GP_090201_00004_Angular Coding Standard-V1.9 .pdf</div>
        <div>C105_GP_090201_00005_Angular RTC包版規範-V1.0 .pdf</div>
        <div>go to <a href="https://eip.esunbank.com.tw/sites/C105/DocLib4/Forms/AllItems.aspx?RootFolder=%2Fsites%2FC105%2FDocLib4%2FGP_%E7%B3%BB%E7%B5%B1%E8%A6%8F%E5%8A%83%E6%BA%96%E5%89%87%2F09_%E6%9E%B6%E6%A7%8B%E8%A8%AD%E8%A8%88%E6%BA%96%E5%89%87%2F02_%E9%96%8B%E7%99%BC%E6%BA%96%E5%89%87%2F01&FolderCTID=0x0120007333877AD0731A4FBC4711667A2A64B1&View=%7BB4D020D5-C9CF-44EA-949F-80721D5068DE%7D" target="_blank">
        EIP網站連結</a></div></div>`,
        ''
      ]
    };
    
    this.imgDataConfig = {
      animationType: EsbImageAnimationConfig.SLIDE_OVERLAP,
      autoplay: true,
      autoplayDelay: 2000
    };

    this.itemsLeft = [
      { label: ' -K  其他大洋洲地區', value: 1 },
      { label: ' -L 東帝汶 TIMOR-LESTE', value: 2 },
      { label: ' -F 阿富汗 AFGHANISTAN<font color="red">(受管制)</font>', value: 3 },
      { label: ' UY 烏拉圭 URUGUAY', value: 4 },
      { label: ' HT 海地 HAITI', value: 5 },
      { label: ' JP 日本 JAPAN', value: 6 },
      { label: ' KE 肯亞 KENYA', value: 7 },
      { label: ' PH 菲律賓 PHILIPPINES', value: 8 },
      { label: ' PL 波蘭 POLAND', value: 9 },
      { label: ' MX 墨西哥 MEXICO', value: 10 },
      { label: ' MY 馬來西亞 MALAYSIA', value: 11 },
      { label: ' US 美國 UNITED STATES', value: 12 },
    ]
    this.selectedItemsRight = [{ label: ' US 美國 UNITED STATES', value: 12 }];


  }

  selectedRightItemChange($event: any) {
    this.watchedRightItems = $event;
    console.log(' selectedRightItemChange');
    console.log(this.watchedRightItems);
  }
  sayhi() {
    console.log('test');
  }
}