/**
 * @since Fri Oct 05 2018
 * @author Charles Gouldmann - Klean
 */

import { Component, OnInit, OnDestroy} from '@angular/core'
import {
    trigger,
    state,
    style,
    animate,
    transition
} from '@angular/animations'


import { StepNavigationService } from '@k-core/modules/configurator/services/svc.step-navigation'


interface Steps {
    name: string;
    active: boolean;
    reached: boolean;
}


@Component({
    moduleId: module.id+ '',
    selector: 'configurator-step-navigation',
    templateUrl: './template/t--step-navigation.pug',
    styleUrls: ['sty.step-navigation.scss'],
    animations: [
        trigger('sticky', [
            state('sticky', style({
                position: 'fixed',
                top: '117px' // desktop
            })),
            state('sticky-offset', style({
                position: 'fixed',
                top: 0 // desktop
            }))
        ]),
        trigger('breadcrumb', [
            state('show', style({
                width: '100%',
            })),
            state('hide', style({
                width: 0,
            })),
            transition('hide <=> show', [
                animate('0.3s')
            ])
        ])
    ]
})

export class StepNavigationComponent {

    // ---- Variables ---- \\

    // Settings
    stepTypes: string[] = ['type', 'measurements', 'color', 'details']

    // Layout variables
    myOffset = 300
    transitionTimeInMs = 300

    // Logic variables
    steps: Steps[]
    current: string

    // Observables
    stepsObservable
    stepNavigationObservable



    constructor(
        private _stepnavigation : StepNavigationService
    ) {
        // Get steps and subscribe to steps observable
        this.steps = _stepnavigation.getSteps()
        this. stepsObservable = _stepnavigation.steps$.subscribe((resp) => {
            this.steps = resp
        })

        // Get current step and subsribe to current observable
        this.current = _stepnavigation.getCurrentStep()
        this.stepNavigationObservable = _stepnavigation.currentStep$.subscribe((resp: string) => {
            this.current = resp
        })
    }




    // ---- Lifecycle hooks ---- \\
    ngOnInit() {
        this._stepnavigation.registerSteps(this.stepTypes)
    }

    ngOnDestroy() {
        // Unsubscribe on destroy
        this.stepsObservable.unsubscribe()
        this.stepNavigationObservable.unsubscribe()
    }


    // ---- Functions ---- \\

    goToStep(step: string) {
        console.log('trigger goToStep() in component')
        this._stepnavigation.goToStep(step)
    }

    next() {
        this._stepnavigation.stepInDirection('next')
    }

    reset() {
        this._stepnavigation.registerSteps(this.stepTypes)
    }
}