
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Page } from '@nativescript/core/ui/page';
import { resetIcon } from '~/constants/icons';
import { SortSearchTag } from '~/pages/event/types/common.types';

export const TOP_ACTION_BAR_HEIGHT = 100;
export interface ActionBarAction {
    type: string;
    icon: string;
    disabled?: boolean;
    title?: string;
}

@Component({
    selector: 'scrollActionBar',
    templateUrl: `./disappearing-scroll-action-bar.component.html`,
    styleUrls: ['./_disappearing-scroll-action-bar.component.scss']
})
export class DisappearingScrollActionBarComponent implements OnInit {
    @Output()
    resetSortSearchAction = new EventEmitter()
    @Input()
    isSearchSortDirty: boolean
    @Input()
    tags: SortSearchTag[];
    topBarHeight: number = TOP_ACTION_BAR_HEIGHT;
    resetIcon = resetIcon;

    private _actionList: ActionBarAction[];

    get actionList() {
        return this._actionList
    }

    _rightActions: ActionBarAction[];
    _leftActions: ActionBarAction[];
    @Input()
    set actionList(val: ActionBarAction[]) {
        if (val.length < 4) {
            this._rightActions = val;
        } else {
            this._leftActions = val.slice(0, -3)
            this._rightActions = val.slice(-3)
        }

        this._actionList = val
    }
    @Output()
    handleAction = new EventEmitter()

    @Input()
    title: string;
    @Input()
    static: boolean = false;

    lastOffset = 0;
    isTopBarVisible: boolean = false;
    currentScrollUp = 0;
    currentScrollDown = 0;
    scrolledToTop: boolean = true;

    constructor(private page: Page,
    ) {
    }
    ngOnInit(): void {
        this.page.actionBarHidden = true;
    }
    onScroll(currentOffset: number) {
        if (this.lastOffset > currentOffset) {
            this.currentScrollUp += this.lastOffset - currentOffset;
            if (currentOffset == 0) {
                this.scrolledToTop = true;
            }
            else if (
                this.currentScrollUp > this.topBarHeight &&
                currentOffset > this.topBarHeight
            ) {
                this.isTopBarVisible = true;
                this.scrolledToTop = false;
                this.currentScrollUp = 0;
                this.currentScrollDown = 0;
            }
        } else {
            this.currentScrollUp = 0;
            if (this.currentScrollDown < this.topBarHeight)
                this.currentScrollDown += currentOffset - this.lastOffset
            else {
                this.currentScrollDown = this.topBarHeight;
                this.isTopBarVisible = false;
            }
        }
        this.lastOffset = currentOffset;
        return this.lastOffset
    }
}