import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { getUTC } from '@app/utils/date';
import { ITextSize, ITextWeight } from '@toolkit/text/text.component';
import { TimeGroupBaseComponent } from '@modules/components/time-group/time-group-base.component';
import { ITimesSet } from '@typings/times';

@Component({
    selector: 'time-group',
    templateUrl: './time-group.component.html',
    styleUrls: [
        './time-group.component.scss',
        './time-group-positioning.component.scss',
        './time-group-sizes.component.scss',
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TimeGroupComponent extends TimeGroupBaseComponent {
    @Input() scheduled: ITimesSet | undefined;
    @Input() actual: ITimesSet | undefined;

    get times(): ITimesSet | undefined {
        // Scheduled time is outdated if there is actual time;
        return this.actual || this.scheduled;
    }

    get time() {
        return this.times?.localTime;
    }

    get oldTime() {
        if (!this.scheduled) {
            return null;
        }

        // Do not use this.actual?.localTime here because we need
        // to check if actual time was passed to a component
        const hasOldTime =
            Boolean(this.actual) &&
            this.actual.localTime !== this.scheduled.localTime;

        // Return time only if there is actual time. Then scheduled time will be outdated;
        return hasOldTime ? this.scheduled.localTime : null;
    }

    get utc() {
        if (!this.withUTC || !this.times) {
            return '';
        }

        return getUTC(this.times.local);
    }

    get timeGroupClasses() {
        return {
            'time-group': true,
            'time-group--bold': this.bold,
            [`time-group--${this.align}`]: this.align !== 'left',
            [`time-group--${this.size}`]: this.size !== 'large',
            [`time-group--day-change-${this.dayChangeLayout}`]:
                this.dayChangeLayout !== 'right',
            'time-group--day-change-absolute':
                this.dayChangePosition === 'absolute',
        };
    }

    get shouldShowDayChange() {
        return this.times?.dayChange.value;
    }

    get timeWeight(): ITextWeight {
        if (this.bold) {
            return 'regular';
        }

        switch (this.size) {
            case 'large': {
                return 'light';
            }
            case 'medium': {
                return 'regular';
            }
            case 'small':
            case 'extra-small': {
                return 'medium';
            }
        }
    }

    get timeSize(): ITextSize {
        switch (this.size) {
            case 'large': {
                return '30';
            }
            case 'medium': {
                return '18';
            }
            case 'small': {
                return '16';
            }
            case 'extra-small': {
                return '14';
            }
        }
    }

    get utcSize(): ITextSize {
        switch (this.size) {
            case 'large': {
                return '22';
            }
            case 'medium': {
                return '12';
            }
            case 'small':
            case 'extra-small': {
                return '10';
            }
        }
    }
}
