import { decorate, observable, action } from 'mobx';

import { Image } from 'react-images';

export default class UIStore {
  isBasketVisible: boolean = false;
  isMobileMenuVisible: boolean = false;
  isLightboxVisible: boolean = false;
  lightBoxImageIndex: number = 0;
  lightBoxImages: Array<Image> = []
  lightBoxLayoutId: string = '';

  closeBasket(): void {
    this.isBasketVisible = false;
  }

  closeMobileMenu(): void {
    this.isMobileMenuVisible = false;
  }

  updateLightboxIndex(newIndex: number): void {
    this.lightBoxImageIndex = newIndex;
  }

  toggleLightbox(): void {
    this.isLightboxVisible = !this.isLightboxVisible;
  }

  toggleBasket(): void {
    if (this.isMobileMenuVisible) {
      this.toggleMobileMenu();
    }

    this.isBasketVisible = !this.isBasketVisible;
  }

  toggleMobileMenu(): void {
    if (this.isBasketVisible) {
      this.toggleBasket();
    }

    this.isMobileMenuVisible = !this.isMobileMenuVisible;
  }
}

decorate(UIStore, {
  isBasketVisible: observable,
  isMobileMenuVisible: observable,
  isLightboxVisible: observable,
  lightBoxImageIndex: observable,
  lightBoxImages: observable,
  lightBoxLayoutId: observable,
  toggleLightbox: action,
  toggleBasket: action,
  toggleMobileMenu: action,
  updateLightboxIndex: action,
  closeBasket: action,
  closeMobileMenu: action
});