import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
} from '@angular/core';

import {
    fadeInOutAnimation,
} from './../../helpers/animations/index';

@Component({
    animations: [
        fadeInOutAnimation(),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'dropdown-select-box-component',
    styleUrls: [
        './dropdown-select-box.component.scss',
    ],
    templateUrl: './dropdown-select-box.component.template.pug',
})
export default class DropdownSelectBoxComponent implements OnInit {
    @Input()
    public options: { [key: string]: string };

    @Input()
    public value: string;

    @Output()
    public onChange = new EventEmitter<string>();

    public areOptionsVisible = false;
    public displayValue: string;

    public ngOnInit() {
        this.updateDisplayValue();
    }

    public updateDisplayValue() {
        this.displayValue = this.options[this.value];
    }

    public toggleOptions() {
        this.areOptionsVisible =
            !this.areOptionsVisible;
    }

    public optionSelected(optionKey: string) {
        this.value = optionKey;
        this.updateDisplayValue();
        this.onChange.emit(optionKey);
    }
}