import { Subject } from 'rxjs';
import {
  Component,
  EventEmitter,
  Input,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';
import { CommonModule } from '@angular/common';

// Animations
import { pickupAnimation } from '../../animations/animation';

// Modules
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AngularSvgIconModule } from 'angular-svg-icon';

// Constants
import { NoteConfigConstants } from '../ca-note-container/utils/constants/note-config.constant';

// Components
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';

// Models
import { NoteActiveOptions } from '../../models/note-active-options.model';
import { NoteColors } from '../ca-note-container/models/note-colors.model';

// Enums
import { NoteSelectedColorStringEnum } from '../ca-note-container/enums/note-selected-color.enum';
import { NoteDefaultStringEnum } from '../ca-note-container/enums/note-default-string.enum';

//svg-routes
import { NoteContainerSvgRoutes } from '../ca-note-container/utils/svg-routes/note-container-svg-routes';

@Component({
    selector: 'app-ca-note-container',
    templateUrl: './ca-note-container.component.html',
    styleUrls: ['./ca-note-container.component.scss'],
    imports: [
        // Module
        CommonModule,
        AngularSvgIconModule,
        NgbModule,
        // Component
        CaAppTooltipV2Component,
    ],
    animations: [pickupAnimation]
})
export class CaNoteContainerComponent implements OnInit, OnDestroy {
  @Input() value!: string;
  @Input() range!: Range;
  @Input() selectionTaken!: Selection;
  @Input() isExpanded!: boolean | string;
  @Input() isParking: boolean = false;
  @Input() isPopoverNote: boolean = false;
  @Input() isVisibleArrow: boolean = true;
  @Input() type!: string;
  @Input() selectedEditor!: HTMLDivElement;

  @Output() stopBlurRemoveTimeout = new EventEmitter();

  //Colors
  public selectedPaternColor: string = NoteSelectedColorStringEnum.GRAY_RGB;
  public activeOptions: NoteActiveOptions | any = {
    ...NoteConfigConstants.noteActiveOptions,
  };
  public containerColors!: NoteColors[];
  public selectedColorName!: NoteColors;

  //Timeout
  private slowTimeout!: ReturnType<typeof setTimeout>;
  private lastSavedIndex: number = -1;

  //Pattern
  private isDefaultColorSet: boolean = false;
  public isShowColorPattern!: boolean;
  public isClosedPattern: boolean = false;
  public isHoveringArrowPicker: boolean = false;

  private destroy$ = new Subject<void>();

  constructor() {}

  ngOnInit(): void {
    this.setContainerColors();
  }

  private filterContainersColor(): void {
    this.containerColors.sort((a) => {
      if (a[NoteDefaultStringEnum.COLOR] !== this.selectedColorName.color) {
        return 1;
      }
      return -1;
    });
  }

  public executeEditor(action: string, color?: string, indx?: number): void {
    this.stopBlurRemoveTimeout.emit();
    if (indx || indx === 0) this.selectedColorName = this.containerColors[indx];

    if (this.range) {
      this.selectionTaken.removeAllRanges();
      this.selectionTaken.addRange(this.range);
    }
    if (action !== NoteDefaultStringEnum.FORE_COLOR2) {
      this.isShowColorPattern = false;
      this.activeOptions[action] = !this.activeOptions[action];
      if (!this.activeOptions[action]) {
        if (this.value.replace('<br>', '') === '')
          this.selectionTaken.removeAllRanges();

        document.execCommand(
          NoteDefaultStringEnum.CSS_STYLE,
          false,
          NoteDefaultStringEnum.FALSE
        );
        document.execCommand(action, false);
      } else {
        this.focusElement();
        document.execCommand(action, false);
      }
    } else {
      if (this.lastSavedIndex != indx) this.filterContainersColor();

      this.lastSavedIndex = indx || -1;
      setTimeout(() => {
        this.focusElement();
        setTimeout(() => {
          this.focusElement();
          this.selectedPaternColor = color || 'grey';
          document.execCommand(NoteDefaultStringEnum.FORE_COLOR2, false, color);
        });
      });
    }
  }
  public togglePattern(): void {
    this.isShowColorPattern = !this.isShowColorPattern;

    if (!this.isShowColorPattern)
      setTimeout(() => {
        this.isClosedPattern = false;
      }, 300);
    else this.isClosedPattern = true;
  }

  public hoveringArrow(value: boolean): void {
    this.isHoveringArrowPicker = value;
  }

  private setContainerColors(): void {
    this.containerColors =
      this.type === NoteDefaultStringEnum.DARK
        ? [...NoteConfigConstants.noteDarkColors]
        : [...NoteConfigConstants.noteLightColors];

    this.selectedColorName = {
      name: this.containerColors[0].name,
      color: this.containerColors[0].color,
    };
  }

  /**Function retrun id */
  public identity(index: number): number {
    return index;
  }

  public getSvgPath(propertyName: keyof typeof NoteContainerSvgRoutes): string {
    return NoteContainerSvgRoutes[propertyName] as string;
  }

  public focusElement(): void {
    if (this.selectedEditor) this.selectedEditor.focus();
    else document.getElementById(NoteDefaultStringEnum.MAIN_EDITOR)!.focus();
  }

  public checkActiveItems(): void {
    for (const act in this.activeOptions) {
      this.activeOptions[act] = document.queryCommandState(act);

      clearTimeout(this.slowTimeout);
      this.slowTimeout = setTimeout(() => {
        const findedColor = this.containerColors.find(
          (item) =>
            item.color ===
            document.queryCommandValue(NoteDefaultStringEnum.FORE_COLOR)
        );
        this.selectedColorName = findedColor
          ? findedColor
          : {
              color: NoteSelectedColorStringEnum.GRAY_RGB,
              name: NoteSelectedColorStringEnum.GRAY,
            };
      }, 200);
      this.selectedPaternColor = document.queryCommandValue(
        NoteDefaultStringEnum.FORE_COLOR
      );
    }

    if (this.isDefaultColorSet) {
      this.containerColors.map((col, indx) => {
        if (col.color === this.selectedPaternColor) {
          this.selectedColorName = this.containerColors[indx];

          if (this.lastSavedIndex != indx) {
            this.filterContainersColor();
          }
          this.lastSavedIndex = indx;
          setTimeout(() => {
            this.focusElement();
            setTimeout(() => {
              this.focusElement();
              this.selectedPaternColor = col.color;
            });
          });
        }
      });
    }
  }

  ngOnDestroy(): void {
    this.isShowColorPattern = false;
    this.destroy$.next();
    this.destroy$.complete();
  }
}