import { Component, OnInit } from '@angular/core';
import * as Constants from '../constants';

import { SharedService } from '../../shared/shared.service';

@Component({
  selector: 'scroll-top',
  templateUrl: './scroll-top.component.html',
  styleUrls: ['./scroll-top.component.css']
})
export class ScrollTopComponent {
  storeId: number = Constants.STORE_ID_CD;
  rtStoreId: number = Constants.STORE_ID_RT;
  showArrow: boolean = false;
  _scrollToTopClick: any;

  constructor(public sharedService: SharedService) { }

  /**
   * This function is used to initialize the directive/component after Angular
   * first displays the data-bound properties.It is invoked only once when the
   * directive is instantiated.
   * @returns void
   */
  ngOnInit(): void {
    const METHOD_NAME: string = 'ngOnInit()';
    this.sharedService.storeId.subscribe((val: number) => { this.storeId = val; });
  }

  onPanelScroll($event) {
    let _onScrollTopValue = $event.target.scrollTop;
    this._scrollToTopClick = $event.target;
    let _miniCartPanel = document.getElementById('mincart-panel');
    let _footer = document.getElementById('footer');
    let _miniCartScrollUpto = window.innerHeight - _footer.offsetHeight;
    let _miniCartTopMargin = (_onScrollTopValue - 100) + 'px';
    //let _miniCartTopMargin = (_onScrollTopValue - 100) + 20 + 'px';
    // let _miniCartScrollUpto = _miniCartPanel ? (_onScrollTopValue - ((_miniCartPanel.offsetHeight + 240) - window.innerHeight)) + 'px' : 0 + 'px';
    if (_onScrollTopValue > 100) {
      if (_miniCartPanel) {
        setTimeout(() => {
          if (parseInt(_miniCartTopMargin) < _miniCartScrollUpto) {
            _miniCartPanel.style.top = _miniCartTopMargin;
          }
        }, 200)
      }
      this.showArrow = true;
    } else if (
      (this.showArrow) ||
      _onScrollTopValue < 100
    ) {
      if (_miniCartPanel) {
        setTimeout(() => {
          _miniCartPanel.style.top = '0px';
        }, 200)
      }
      this.showArrow = false;
    }
  }

  scrollToTop($event) {
    let _scrollPanel = this._scrollToTopClick;
    let _miniCartPanel = document.getElementById('mincart-panel');
    (function smoothscroll() {
      const currentScroll = _scrollPanel.scrollTop;
      if (currentScroll > 0) {
        window.requestAnimationFrame(smoothscroll);
        _scrollPanel.scrollTo(0, currentScroll - currentScroll / 15);
        if (_miniCartPanel) {
          _miniCartPanel.style.top = '0px';
        }
      }
    })();
  }
}