import { Component, OnInit, HostListener, Input, ElementRef, Renderer,ViewChild } from '@angular/core';
import { Message } from "../service/message"
import { Store } from "../service/store"
import { Location } from "../service/location"
// import { Location } from '@angular/common';

@Component({
  selector: '[safe-show-handle]',
  template: `
<span #eye [ngClass]="cssObj"></span>
`
})
export class SafeShowHandleComponent implements OnInit {
  hide
  cssObj = {}
  @Input() closeCss:string
  @Input() openCss:string
  @ViewChild('eye') eye
  constructor(
    public message:Message,
    public store:Store,
    public element:ElementRef,
    public renderer:Renderer,
    public location:Location
  ) { }

  ngOnInit() {
    this.getSafeShowStatus().then((hide)=>{
      this.hide = hide;
      this.changeCss(hide);
    });
  }

  changeCss = (hide) => {
    this.cssObj[this.closeCss] = hide;
    this.cssObj[this.openCss] = !hide;
  }

  @HostListener('touchstart',['$event'])
  onClick = (event) =>{
    event.stopPropagation();
    event.preventDefault();
    this.safeShowSwitch();
  }

  getName = () => {
    return 'safe.show-' + this.location.pathname;
  }

  safeShowSwitch = () => {
    const hide = this.hide;
    const name = this.getName();

    this.store.set(name,{show: !hide}).then(()=>{
      return this.getSafeShowStatus();
    }).then((hide)=>{
      this.message.send(name,{show: !hide});
      this.hide = hide;
      this.changeCss(hide);
    });
  }

  getSafeShowStatus = () => {
    const name = this.getName();
    return this.store.get(name).then((safeShow:any)=>{
      safeShow = safeShow || {};
      return new Promise((resolve, reject)=>{
        resolve(safeShow.show || false);
      });
    });
  }
}


@Component({
  selector: '[safe-show]',
  template: '<span *ngIf="!hide"><ng-content></ng-content></span>' +
  '<span class="safe-show-hide" *ngIf="hide">****</span>',
})
export class SafeShowComponent implements OnInit {
  hide: boolean
  @Input() close: boolean
  constructor(
    public message:Message,
    public store:Store,
    public location:Location
  ) { }

  getName = () => {
    return 'safe.show-' + this.location.pathname;
  }

  ngOnInit() {
    if(this.close) return false;
    const name = this.getName();
    this.store.get(name).then((safeShow:any)=>{
      safeShow = safeShow || {};
      const hide = safeShow.show || 0;
      this.hide = hide;
      this.message.receive(name,() => {
        this.hide = !this.hide;
      });
    });
  }

}