import { Component, Input } from '@angular/core';
import { DispatchType } from '@typings/enums';
import { IFlightTransition } from '@typings/flight/flight-transition';

@Component({
    selector: 'flight-transition',
    templateUrl: './flight-transition.component.html',
    styleUrls: [
        './flight-transition.component.layout.scss',
        './flight-transition.component.mobile-layout.scss',
    ],
})
export class FlightTransitionComponent {
    @Input() transition: IFlightTransition;
    @Input() title: string;
    @Input() dispatch: DispatchType;
    @Input() gate: string;
    @Input() bagBelt: string;

    get gatePropertyClasses() {
        return {
            transition__gate: true,
            'transition__first-property': !!this.gate,
        };
    }

    get dispatchPropertyClasses() {
        // if there is no gate we should show dispatch in the first property area
        const isFirstProperty = !this.gate;

        // if there is a gate we should show dispatch in the second property area
        const isSecondProperty = !!this.gate;

        return {
            transition__dispatch: true,
            'transition__first-property': isFirstProperty,
            'transition__second-property': isSecondProperty && !!this.dispatch,
        };
    }

    get bagBeltPropertyClasses() {
        // if there is no dispatch and gate we should show bag belt in the first property area
        const isFirstProperty = !this.dispatch && !this.gate;

        // There is dispatch and gate - we should show bag belt in the third property area
        const isThirdProperty = this.dispatch && this.gate;

        // if there is dispatch or gate we should show bag belt in the second property area
        const isSecondProperty = !isFirstProperty && !isThirdProperty;

        return {
            'transition__bag-belt': true,
            'transition__first-property': isFirstProperty,
            'transition__second-property': isSecondProperty,
            'transition__third-property': isThirdProperty && !!this.bagBelt,
        };
    }
}
