import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { TimeGroupBaseComponent } from '@modules/components/time-group/time-group-base.component';
import { DATE_FORMAT } from '@shared/helpers';
import { ITimesSet } from '@typings/times';
import * as moment from 'moment';

@Component({
    selector: 'captioned-time-group',
    templateUrl: './captioned-time-group.component.html',
    styleUrls: ['./captioned-time-group.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CaptionedTimeGroupComponent extends TimeGroupBaseComponent {
    @Input() times: ITimesSet;
    @Input() withDate = false;
    @Input() caption: string;

    constructor() {
        super();
        this.size = 'extra-small';
    }

    get date() {
        const [date] = this.times.local.split('T');

        return date
            ? moment(date).format(DATE_FORMAT)
            : moment(this.times.local).format(DATE_FORMAT);
    }

    get timeGroupClasses() {
        return {
            'captioned-time-group': true,
            [`captioned-time-group--${this.align}`]: this.align !== 'left',
        };
    }
}