import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { CdkDragDrop, CdkDropList, CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
import { Title } from '@angular/platform-browser';
import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSliderModule } from '@angular/material/slider';

import { Subscription } from 'rxjs';

import { Errors, User } from '@models';
import { UserService } from '@services';
import { ListErrorsComponent } from '@components/shared';

@Component({
    selector: 'app-demo',
    imports: [
        CdkDropList,
        CdkDrag,
        CdkDragPlaceholder,
        RouterLink,
        MatButtonModule,
        MatCardModule,
        MatDividerModule,
        MatIconModule,
        MatProgressBarModule,
        MatSliderModule,
        ListErrorsComponent,
    ],
    templateUrl: './demo.component.html',
    styleUrl: './demo.component.scss',
})
export class DemoComponent implements OnInit, OnDestroy {
    private titleService = inject(Title);
    private userService = inject(UserService);

    private _user: Subscription = new Subscription();
    private _colors: string[] = [
        'primary',
        'accent',
        'warn',
        'secondary',
        'megna',
        'raspberry',
        'success',
        'info',
        'warning',
        'danger',
        'red',
        'orange',
        'yellow',
        'green',
        'teal',
        'turquoise',
        'cyan',
        'blue',
        'navy',
        'navy-light',
        'pink',
        'magenta',
        'purple',
        'purple-light',
        'grey',
        'muted',
    ];
    private _icons: string[] = [
        'mode_edit',
        'delete',
        'bookmark',
        'settings',
        'home',
        'person',
        'share',
        'account_circle',
        'public',
        'search',
        'favorite',
        'done',
        'numbers',
        'attach_file',
        'insert_comment',
        'format_list_bulleted',
        'filter',
        'crop',
        'edit_attributes',
        'upload',
        'download',
        'expand_less',
        'expand_more',
        'chevron_left',
        'chevron_right',
        'sync',
        'power',
        'power_off',
        'notifications',
        'emoji_emotions',
        'person_add',
        'block',
    ];

    title = 'Demo';
    bannerTitle = '';
    user: Partial<User> = {} as Partial<User>;
    errors: Errors = { errors: {} };
    btnSettingsTitle = 'Paramètres';

    ngOnInit() {
        this.titleService.setTitle(`Ad Astra - ${this.title}`);
        Object.assign(this.user, this.userService.getCurrentUser());
        if (this.user.username) {
            this.bannerTitle = `@${this.user.username}`;
        } else {
            this.bannerTitle = `${this.user.firstname} ${this.user.lastname}`;
        }
    }

    ngOnDestroy() {
        this._user.unsubscribe();
    }

    getColors(): string[] {
        return this._colors;
    }

    getIcon(index: number): string {
        return this._icons[index];
    }

    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this._colors, event.previousIndex, event.currentIndex);
    }
}
