import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ScheduleDirection } from '@typings/enums';

@Component({
    selector: 'schedule-direction-switch',
    templateUrl: './schedule-direction-switch.component.html',
    styleUrls: ['./schedule-direction-switch.component.scss'],
})
export class ScheduleDirectionSwitchComponent {
    @Input() direction: ScheduleDirection;
    @Output() directionChange = new EventEmitter<ScheduleDirection>();
    Direction = ScheduleDirection;

    setDirection(direction: ScheduleDirection) {
        this.directionChange.emit(direction);
    }

    getClass(direction: ScheduleDirection) {
        const active = this.direction === direction;
        const isDirect = direction === ScheduleDirection.OUTBOUND;
        const effectClass = isDirect
            ? 'schedule-direction-switch__button--direct'
            : 'schedule-direction-switch__button--return';

        return {
            'schedule-direction-switch__button': true,
            'schedule-direction-switch__button--active': active,
            [effectClass]: true,
        };
    }

    getIconStyles(direction: ScheduleDirection) {
        const active = this.direction === direction;
        const white = '#FFFFFF';
        const blue = '#065398';

        return {
            fill: active ? white : blue,
        };
    }
}
