import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { arrivalBlockOnTimes, departureBlockOffTimes } from '@app/utils/times';
import { IFlightEventsDirection } from '@components';
import { FlightModel, ListItem } from '@shared/models-legacy/flight.model';
import { getLegs, IArrivalStation, IDepartureStation } from '@app/shared/models-legacy';

@Component({
    selector: 'board-flight-header',
    templateUrl: './board-flight-header.component.html',
    styleUrls: [
        './board-flight-header.component.scss',
        './board-flight-header.component.mobile.scss',
        './board-flight-header.component.tablets.scss',
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BoardFlightHeaderComponent implements OnChanges {
    @Input() flight: ListItem<FlightModel>;
    @Input() expanded = false;
    arrival: IArrivalStation;
    departure: IDepartureStation;
    changeRoute: boolean;
    reroute: boolean;

    ngOnChanges(changes: SimpleChanges) {
        if (this.flight && 'flight' in changes) {
            const legs = getLegs(this.flight);

            this.arrival = legs[legs.length - 1].arrival;
            this.departure = legs[0].departure;

            this.changeRoute = legs.some((leg) => leg.changeRoute);
            this.reroute = legs.some((leg) => leg.reroute);
        }
    }

    get departureBlockOffTimes() {
        return departureBlockOffTimes(this.departure._times);
    }

    get arrivalBlockOnTimes() {
        return arrivalBlockOnTimes(this.arrival._times);
    }

    get arrowIconClasses() {
        return {
            'arrow-icon': true,
            'arrow-icon--visible': this.expanded,
        };
    }

    get flightEventsDirection(): IFlightEventsDirection {
        return this.flight.expanded ? 'column-mobile' : 'row';
    }
}
