import { CommonModule } from '@angular/common';
import {
    ChangeDetectionStrategy,
    Component,
    Input,
    OnChanges,
    SimpleChanges,
} from '@angular/core';
import {
    AnimationLoader,
    LottieComponent,
    provideLottieOptions,
} from 'ngx-lottie';
import player from 'lottie-web';

@Component({
    selector: "app-ca-spinner",
    templateUrl: "./ca-spinner.component.html",
    styleUrls: ["./ca-spinner.component.scss"],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [
        // Module
        CommonModule,
        // Components
        LottieComponent,
    ],
    providers: [
        provideLottieOptions({
            player: () => player,
        }),
        AnimationLoader
    ]
})
export class CaSpinnerComponent implements OnChanges {
    @Input() size?: string; // small, big
    @Input() color?: string; // black, gray, white, blueLight, blueDark
    @Input() isBarSpinner?: boolean = false;

    public lottieSpinner!: { path: string };

    constructor() {}

    ngOnChanges(changes: SimpleChanges): void {
        this.getLottieSpinner(changes);
    }

    public getLottieSpinner(changes: SimpleChanges): void {
        if (changes['size'] || changes['color']) {
            const sizePx =
                this.size === 'extra-small'
                    ? '12px'
                    : this.size === 'small'
                      ? '18px'
                      : '32px';

            this.lottieSpinner = {
                path: `/assets/lottie/ta-lottie-spinner/${sizePx}/${this.color}.json`,
            };
        }
    }
}