import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ITextStyles } from '@toolkit/text/text.component';
import { ITextAlign } from '@typings/common/align';
import { IComponentSize } from '@typings/common/size';
import { IFlightLegStation } from '@typings/flight/flight-station';

@Component({
    selector: 'station',
    templateUrl: './station.component.html',
    styleUrls: ['./station.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StationComponent {
    @Input() station: IFlightLegStation;
    @Input() align: ITextAlign = 'left';
    @Input() size: IComponentSize = 'small';
    @Input() withOldCity = false;
    // todo: remove after terminal-link deprecation
    @Input() oldStation: IFlightLegStation | undefined;

    get shouldShowOldCity() {
        if (!this.withOldCity) {
            return false;
        }

        return (
            Boolean(this.station.latest) &&
            this.station.latest.city !== this.station.scheduled.city
        );
    }

    get city() {
        const { scheduled, latest } = this.station;

        return latest?.city || scheduled.city;
    }

    get oldCity() {
        if (!this.shouldShowOldCity) {
            return '';
        }

        return this.station.scheduled.city;
    }

    get cityStyles(): ITextStyles {
        switch (this.size) {
            case 'large': {
                return {
                    size: '30',
                    mobileSize: '20',
                    weight: 'light',
                    mobileWeight: 'regular',
                };
            }
            case 'medium': {
                return {
                    size: '22',
                    mobileSize: '20',
                    weight: 'light',
                    mobileWeight: 'regular',
                };
            }
            case 'small':
            case 'extra-small': {
                return {
                    size: '14',
                    mobileSize: '12',
                    mobileWeight: 'medium',
                };
            }
        }
    }

    get stationClasses() {
        return {
            station: true,
            [`station--${this.align}`]: this.align !== 'left',
        };
    }
}
