import { Component, OnInit, ViewChild } from '@angular/core';
import { circleAnimation } from './circle.animation';
import { removeAnimation } from './remove.animation';
import { expandAnimation } from './expand.animation';
import { SignaturePadComponent } from 'shared/lib/signature-pad/signature-pad.component';
import { CheckboxOption } from '@libs/ui';

@Component({
  selector: 'app-newsletter-signup',
  templateUrl: 'newsletter-signup.component.html',
  styleUrls: ['newsletter-signup.component.scss'],
  animations: [circleAnimation, removeAnimation, expandAnimation],
})
export class NewsletterSignupComponent implements OnInit {
  @ViewChild(SignaturePadComponent) sigPad: SignaturePadComponent;

  stage = 'one';
  options = [];
  init: CheckboxOption[] = [
    {
      value: 'Neues von Inger-Maria Mahlke',
      selected: false,
    },
    {
      value: 'Thema Fantasy',
      selected: false,
    },
    {
      value: 'Veranstaltungen',
      selected: false,
    },
  ];

  extra: CheckboxOption[] = [
    {
      value: 'Neues von Nele Neuhaus',
      selected: false,
    },
    {
      value: 'Thema Roman',
      selected: false,
    },
    {
      value: 'Filiale Stachus',
      selected: false,
    },
  ];

  constructor() {}

  ngOnInit() {
    this.options = [...this.init];
  }

  get changes() {
    if (this.stage == 'one') {
      return this.init.some((i) => i.selected);
    }
    return this.extra.some((i) => i.selected);
  }
  nextStage() {
    this.stage = this.stage === 'one' ? 'two' : 'one';
    if (this.stage === 'one') {
      this.options = [...this.init];
    } else {
      this.options = this.options.filter((i) => i.selected);
    }
  }

  confirm() {
    this.stage = 'two';
    this.options = this.options.filter((i) => i.selected);
    this.sigPad.clear();
  }
}
