import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnChanges,
  SimpleChanges,
} from '@angular/core';

// pipes
import { NameInitialsPipe } from '../../pipes/name-initials.pipe';

@Component({
  selector: 'app-ca-profile-image',
  templateUrl: './ca-profile-image.component.html',
  styleUrls: ['./ca-profile-image.component.scss'],
  imports: [
    CommonModule,
    // pipes
    NameInitialsPipe
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CaProfileImageComponent implements OnChanges {
  @Input() indx!: number;
  @Input() avatarImg: string | undefined;
  @Input() avatarColor: { background?: string; color?: string } = {
    background: '#B7B6F1',
    color: '#6D82C7',
  };

  private imageColor: string[] = [
    '#2724D666',
    '#1AB5E666',
    '#259F9466',
    '#50AC2566',
    '#DF3C3C66',
    '#FF704366',
    '#9E47EC66',
    '#DF3D8566',
    '#F89B2E66',
    '#CF961D66',
    '#865E3A66',
    '#91919166',
  ];

  private backgroundColors: string[] = [
    '#B7B6F1',
    '#B2E6F7',
    '#B6DFDB',
    '#C5E3B6',
    '#F4BEBE',
    '#FFCFC0',
    '#DFC2F9',
    '#F4BED6',
    '#FDDEB9',
    '#EFDCB4',
    '#D6C9BD',
    '#DADADA',
  ];

  @Input() textShortName!: string | undefined;
  @Input() name!: string | number;
  @Input() isRound: boolean = true;
  @Input() size!: string | number;
  @Input() height: string | number = 0;
  @Input() fontSize!: string | number;
  @Input() isHoverEffect: boolean = false;
  @Input() isCursorPointer: boolean = true;
  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['indx']?.currentValue) {
      this.getProfileImageColors();
    }
  }

  public getProfileImageColors(): void {
    this.avatarColor['color'] = this.imageColor[this.indx];
    this.avatarColor['background'] = this.backgroundColors[this.indx];

    if (this.indx > 11) {
      const randomIndex = Math.floor(Math.random() * 12);

      this.avatarColor['color'] = this.imageColor[randomIndex];
      this.avatarColor['background'] = this.backgroundColors[randomIndex];
    }
  }
}