import { Component, OnInit, AfterContentInit, inject } from '@angular/core';
import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, provideNativeDateAdapter } from '@angular/material/core';
import { Title } from '@angular/platform-browser';

import { FullComponent } from '@components/shared/layout';
import { UserService } from '@services';

export const MY_FORMATS = {
    parse: {
        dateInput: 'DD/MM/YYYY',
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM-YYYY',
    },
};

@Component({
    selector: 'app-root',
    imports: [FullComponent],
    providers: [
        { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
        provideNativeDateAdapter(MY_FORMATS),
    ],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit, AfterContentInit {
    private userService = inject(UserService);
    private titleService = inject(Title);

    public title = 'Ad Astra';
    public appClass = 'grayscale';

    ngOnInit() {
        this.userService.populate();
        this.titleService.setTitle(this.title);
    }

    ngAfterContentInit() {
        this.appClass = 'colored';
    }
}