import {Component, ViewChild, ElementRef, ViewEncapsulation} from '@angular/core';
import {ionicBootstrap, Popover, NavController, Content, NavParams, ViewController} from '../../../../../src';


@Component({
  template: `
    <ion-content>
      <ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
        <ion-row>
          <ion-col>
            <button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
          </ion-col>
          <ion-col>
            <button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
          </ion-col>
        </ion-row>
        <ion-row class="row-dots">
          <ion-col>
            <button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
          </ion-col>
          <ion-col>
            <button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
          </ion-col>
          <ion-col>
            <button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
          </ion-col>
          <ion-col>
            <button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
          </ion-col>
        </ion-row>
        <ion-item class="text-athelas">
          <ion-label>Athelas</ion-label>
          <ion-radio value="Athelas"></ion-radio>
        </ion-item>
        <ion-item class="text-charter">
          <ion-label>Charter</ion-label>
          <ion-radio value="Charter"></ion-radio>
        </ion-item>
        <ion-item class="text-iowan">
          <ion-label>Iowan</ion-label>
          <ion-radio value="Iowan"></ion-radio>
        </ion-item>
        <ion-item class="text-palatino">
          <ion-label>Palatino</ion-label>
          <ion-radio value="Palatino"></ion-radio>
        </ion-item>
        <ion-item class="text-san-francisco">
          <ion-label>San Francisco</ion-label>
          <ion-radio value="San Francisco"></ion-radio>
        </ion-item>
        <ion-item class="text-seravek">
          <ion-label>Seravek</ion-label>
          <ion-radio value="Seravek"></ion-radio>
        </ion-item>
        <ion-item class="text-times-new-roman">
          <ion-label>Times New Roman</ion-label>
          <ion-radio value="Times New Roman"></ion-radio>
        </ion-item>
      </ion-list>
    </ion-content>
  `,
})
class PopoverRadioPage {
  background: string;
  contentEle: any;
  textEle: any;
  fontFamily;

  colors = {
    'white': {
      'bg': 'rgb(255, 255, 255)',
      'fg': 'rgb(0, 0, 0)'
    },
    'tan': {
      'bg': 'rgb(249, 241, 228)',
      'fg': 'rgb(0, 0, 0)'
    },
    'grey': {
      'bg': 'rgb(76, 75, 80)',
      'fg': 'rgb(255, 255, 255)'
    },
    'black': {
      'bg': 'rgb(0, 0, 0)',
      'fg': 'rgb(255, 255, 255)'
    },
  };

  constructor(private navParams: NavParams) {

  }

  ngOnInit() {
    if (this.navParams.data) {
      this.contentEle = this.navParams.data.contentEle;
      this.textEle = this.navParams.data.textEle;

      this.background = this.getColorName(this.contentEle.style.backgroundColor);
      this.setFontFamily();
    }
  }

  getColorName(background) {
    let colorName = 'white';

    if (!background) return 'white';

    for(var key in this.colors) {
      if (this.colors[key].bg == background) {
        colorName = key;
      }
    }

    return colorName;
  }

  setFontFamily() {
    if (this.textEle.style.fontFamily) {
      this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, "");
    }
  }

  changeBackground(color) {
    this.background = color;
    this.contentEle.style.backgroundColor = this.colors[color].bg;
    this.textEle.style.color = this.colors[color].fg;
  }

  changeFontSize(direction) {
    this.textEle.style.fontSize = direction;
  }

  changeFontFamily() {
    if (this.fontFamily) this.textEle.style.fontFamily = this.fontFamily;
  }
}


@Component({
  template: `
    <ion-list>
      <ion-list-header>Ionic</ion-list-header>
      <button ion-item (click)="close()">Learn Ionic</button>
      <button ion-item (click)="close()">Documentation</button>
      <button ion-item (click)="close()">Showcase</button>
      <button ion-item (click)="close()">GitHub Repo</button>
    </ion-list>
  `
})
class PopoverListPage {
  constructor(private viewCtrl: ViewController) {}

  close() {
    this.viewCtrl.dismiss();
  }
}


@Component({
  template: `
    <ion-content>
      <ion-list>
        <ion-list-header>Ionic</ion-list-header>
        <button ion-item *ngFor="let item of items">Item {{item}}</button>
      </ion-list>
    </ion-content>
  `
})
class PopoverLongListPage {
  items = [];

  constructor(private viewCtrl: ViewController) {}

  ngOnInit() {
    for(let i = 1; i < 21; i++) {
      this.items.push(i);
    }
  }
}


@Component({
  templateUrl: 'main.html'
})
class E2EPage {
  @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
  @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;

  constructor(private nav: NavController) {

  }

  presentListPopover(ev) {
    let popover = Popover.create(PopoverListPage);
    this.nav.present(popover, {
      ev: ev
    });
  }

  presentLongListPopover(ev) {
    let popover = Popover.create(PopoverLongListPage);
    this.nav.present(popover, {
      ev: ev
    });
  }

  presentRadioPopover(ev) {
    let popover = Popover.create(PopoverRadioPage, {
      contentEle: this.content.nativeElement,
      textEle: this.text.nativeElement
    });

    this.nav.present(popover, {
      ev: ev
    });
  }

  presentNoEventPopover() {
    let popover = Popover.create(PopoverListPage);
    this.nav.present(popover);
  }

}


@Component({
  template: '<ion-nav [root]="root"></ion-nav>',
  styleUrls: ['style.css'],
  encapsulation: ViewEncapsulation.None
})
class E2EApp {
  root = E2EPage;
}

ionicBootstrap(E2EApp);
