import { Component, OnInit } from '@angular/core';
import { PublicService } from '../PublicService';
import { Router } from '@angular/router';
import {LoadingController, PopoverController} from '@ionic/angular';
import { CollectPopoverComponent } from '../shared/collect-popover/collect-popover.component';
import {Constants} from '../Constant';

@Component({
  selector: 'app-tab-collect',
  templateUrl: './tab-collect.page.html',
  styleUrls: ['./tab-collect.page.scss'],
})
export class TabCollectPage implements OnInit {
  private user;
  private userConfig;
  private isHidden = true;
  private collects = [];
  private isChange = false;
  private collectOrderStr;
  constructor(
      private readonly publicService: PublicService,
      private popoverCtl: PopoverController,
      private readonly loadingCtrl: LoadingController,
      public readonly router: Router
  ) {
    this.publicService.event.on('collect', () => {
      this.init();
    });
  }

  ngOnInit() {
    this.init();
  }
  init(){
    this.user = this.publicService.getCurrentUser();
    this.userConfig = this.user.userConfig;
    if (this.userConfig.collection){
      this.collects = JSON.parse(this.userConfig.collection);
      this.collectOrderStr = this.getCollectOrder();
    }
  }
  async save() {
    const load = await this.publicService.showLoading(this.loadingCtrl, '数据保存中...');
    this.userConfig.collection = JSON.stringify(this.collects);
    this.publicService.updateUserConfig(this.userConfig).then(res => {
      load.dismiss();
      if (res.code === Constants.SUCCESS) {
        this.publicService.setCurrentUser(this.user);
        this.publicService.presentToast('保存成功');
        this.isChange = false;
        this.isHidden = true;
        this.collectOrderStr = this.getCollectOrder();
      } else {
        this.publicService.presentToast(res.msg);
      }
    }, err => {
      load.dismiss();
      this.publicService.checkNetworkToast(err);
    });
  }
  toDetail(item){
    this.router.navigate(['/detail'], {
      queryParams: item
    });
  }
  async longPress(item, index){

    const popover = await this.popoverCtl.create({
      component: CollectPopoverComponent,
      componentProps: {
        popoverCtl: this.popoverCtl
      }
    });
    await popover.present();
    const { data } = await popover.onWillDismiss();
    if (data){
      const operation = data.operation;
      if (operation === 1){
        this.collects.unshift(item);
        this.collects.splice(index + 1, 1);
        this.getIsOrderChange();
      }else{
        this.isHidden = false;
      }
    }
  }
  onRenderItems(event) {
    const draggedItem = this.collects.splice(event.detail.from, 1)[0];
    this.collects.splice(event.detail.to, 0, draggedItem);
    event.detail.complete();
    this.getIsOrderChange();
  }
  getIsOrderChange(){
    const collectOrderStr = this.getCollectOrder();
    if (this.collectOrderStr === collectOrderStr){
      this.isChange = false;
    }else{
      this.isChange = true;
    }
  }
  getCollectOrder(){
    let orderStr = '';
    this.collects.forEach(item => {
      orderStr += item.id;
    });
    return orderStr;
  }
}