import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
import { FormControl, FormGroup, FormsModule, NgForm, Validators } from '@angular/forms';
// import { UniqueSelectionDispatcher } from '@angular/material';
import { ActivatedRoute, Router } from '@angular/router';

import { IApiError, TokenService } from '../core/shared';
import { ICountry } from '../core/shared/country/country.model';
import { CountryService } from '../core/shared/country/country.service';

import { IUser, IUserCredentials, User } from '../core/shared/user/user.model';
import { UserService } from '../core/shared/user/user.service';

import { TranslateService } from '@ngx-translate/core';
import { ILanguage, ILanguages } from '../core/shared/language/language.model';
import { LanguageService } from '../core/shared/language/language.service';

import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';

@Component({
    // providers: [UniqueSelectionDispatcher],
    selector: 'knk-feeds',
    styleUrls: ['./feeds.component.scss'],
    templateUrl: './feeds.component.html',
    animations: [
        trigger(
            'hideShow',
            [
                transition(
                    ':enter', [
                        style({ transform: 'scale3d(0.5, -0.5, 1.5)', opacity: 0, color: 'red' }),
                        animate('5000ms', style({ opacity: 1 }))
                    ]
                ),
                transition(
                    ':leave', [
                        style({ transform: 'translate3d(50%, 0, 0) ', opacity: 1, color: 'blue' }),
                        animate('5000ms', style({ opacity: 0 }))
                    ]
                )]
        )
    ]
})
export class FeedsComponent implements OnInit {
    lang: string;

    name: string;
    animationState: string = 'center';
    counter: number = 1;
    items: string[] = ['initial 1', 'initial 2'];

    constructor(
        private translateService: TranslateService,
        private tokenService: TokenService,
        private route: ActivatedRoute) {
    }
    ngOnInit(): void {
        let langParamName: string = 'lang';
        this.lang = this.route.snapshot.data[langParamName];

        let isTestPropertyName: string = 'test';
    }

    public toggleAnimation(): void {
        if (this.animationState === 'right') {
          this.animationState = 'center';
        } else {
          this.animationState = 'right';
        }
        this.items = ['new ' + this.counter, 'new ' + (this.counter + 1)];
        this.counter += 2;
      }
}
