import { Component, DOCUMENT, ElementRef, inject, Renderer2 } from '@angular/core';
import { AppStateService } from '../../services/app-state.service';
import { ColorPickerDirective } from 'ngx-color-picker';
@Component({
    selector: 'app-switcher',
    templateUrl: './switcher.html',
    styleUrls: ['./switcher.scss'],
    imports: [ColorPickerDirective]
})
export class Switcher {
  public localdata: any;
  private document = inject<Document>(DOCUMENT);
  constructor(
    private elementRef: ElementRef,
    private appStateService: AppStateService,
    private renderer: Renderer2
  ) {
    this.appStateService.state$.subscribe(state => {
      this.localdata = state;

    });
  }


  updateTheme(theme: string) {

    this.appStateService.updateState({ theme, menuColor: theme, headerColor: theme });
    if (theme == 'light') {
      this.appStateService.updateState({ theme, themeBackground: '', headerColor: 'light', menuColor: 'dark' });
      let html = document.querySelector('html');
      html?.style.removeProperty('--color-bodybg');
      html?.style.removeProperty('--color-bodybg2');
      html?.style.removeProperty('--color-light');
      html?.style.removeProperty('--color-formcontrolbg');
      html?.style.removeProperty('--color-inputborder');
      html?.style.removeProperty('--color-gray3');
      if (window.innerWidth <= 992) {
        html?.setAttribute('data-toggled', 'close');
      }
    }
    if (theme == 'dark') {
      this.appStateService.updateState({ theme, themeBackground: '', headerColor: 'dark', menuColor: 'dark' });
      let html = document.querySelector('html');
      html?.style.removeProperty('--color-bodybg');
      html?.style.removeProperty('--color-bodybg2');
      html?.style.removeProperty('--color-light');
      html?.style.removeProperty('--color-formcontrolbg');
      html?.style.removeProperty('--color-inputborder');
      html?.style.removeProperty('--color-gray3');
      if (window.innerWidth <= 992) {
        html?.setAttribute('data-toggled', 'close');
      }
    }
  }


  updateDirection(direction: string) {
    let html = this.elementRef.nativeElement.ownerDocument.documentElement;
    this.appStateService.updateState({ direction });
  }
  updatemenuType(navigationStyles: string) {


    this.appStateService.updateState({ navigationStyles });
    if (navigationStyles == 'horizontal') {
      this.appStateService.updateState({ navigationStyles, menuStyles: 'menu-click', layoutStyles: '', });
      const menuclickclosed = document.getElementById(
        'switcher-menu-click'
      ) as HTMLInputElement;

      menuclickclosed.checked = true;
      setTimeout(() => {
        const mainContentElement = document.querySelector(".main-content") as HTMLElement | null;
        if (mainContentElement) {
          mainContentElement.click();
        }
      }, 100);
    } else if (navigationStyles == 'vertical') {
      this.appStateService.updateState({ navigationStyles, menuStyles: '', layoutStyles: 'default', });

    }

  }


  updatemenuStyle(menuStyles: string) {

    this.appStateService.updateState({ menuStyles, layoutStyles: '' });


    const navStyle = document.documentElement.getAttribute('data-nav-style');

    if (navStyle === 'icon-hover') {
      document.querySelector('.double-menu-active')?.setAttribute('style', 'display: none;');
      const Sidebar: any = document.querySelector(".main-menu");
      if (Sidebar) {
        Sidebar.style.marginInline = "0px";
      }
    }

    if (navStyle === 'icon-click') {
      const Sidebar: any = document.querySelector(".main-menu");
      if (Sidebar) {
        Sidebar.style.marginInline = "0px";
      }

    }
  }
  updatelayoutStyles(layoutStyles: string) {
    this.appStateService.updateState({ layoutStyles, menuStyles: '', navigationStyles: '' });
    if (document.querySelector('html')?.getAttribute('data-vertical-style') == 'doublemenu') {
      document.querySelector('.slide-menu')?.classList.add('double-menu-active');
    }
    else {
      document.querySelector('.slide-menu')?.classList.remove('double-menu-active');
    }
  }
  updatepageStyles(pageStyles: string) {
    this.appStateService.updateState({ pageStyles });
  }
  updatewidthStyles(widthStyles: string) {
    this.appStateService.updateState({ widthStyles });
  }
  updatemenuPosition(menuPosition: string) {
    this.appStateService.updateState({ menuPosition });
  }
  updateheaderPosition(headerPosition: string) {
    this.appStateService.updateState({ headerPosition });
  }
  updatemenuColor(menuColor: string) {
    this.appStateService.updateState({ menuColor });
  }
  updateheaderColor(headerColor: string) {
    this.appStateService.updateState({ headerColor: headerColor });
  }
  updateprimary(themePrimary: string) {
    this.appStateService.updateState({ themePrimary: `rgb(${themePrimary})` });
  }
  updateBackground(themeBackground: any) {
    const background = {
      main: `rgb(${themeBackground.main})`,
      secondary: `rgb(${themeBackground.secondary})`,
      accent: `rgb(${themeBackground.accent})`,
      overlay: themeBackground.overlay,
      primary: themeBackground.primary,
      theme: themeBackground.theme
    }
    this.appStateService.updateState({ themeBackground: background, menuColor: 'dark', headerColor: 'dark', theme: "dark" });
  }
  updateBgImage(backgroundImage: string) {
    this.appStateService.updateState({ backgroundImage });
  }


  defaultPrimary = '#6c5ffc';
  public dynamicLightPrimary(data: any): void {
    this.defaultPrimary = data.color;
    let primaryColor = this.convertRgbToIndividual(this.defaultPrimary)

    this.updateprimary(primaryColor);

  }

  //background theme change
  convertRgbToIndividual(value: string): string {
    // Use a regular expression to extract the numeric values
    const numericValues = value.match(/\d+/g) || [];
    // Join the numeric values with spaces to get the desired format
    return numericValues.join(' ');
  }
  public defaultBg = '#6c5ffc';
  public dynamicTranparentBgPrimary(data: any): void {
    this.defaultBg = data.color;
    let bgRgb = this.convertRgbToIndividual(this.defaultBg);
    let bgRgb2 = this.convertRgbToIndividual(this.defaultBg);
    let bg1Update = bgRgb.split(' ').join(', ');
    let bg2Update: any = bgRgb2.split(' ');
    bg2Update[0] = Number(bg2Update[0]) + 14;
    bg2Update[1] = Number(bg2Update[1]) + 14;
    bg2Update[2] = Number(bg2Update[2]) + 14;
    let bgColor = {
      main: bg1Update, secondary: bg2Update.join(', '),
      accent: bg2Update.join(', '), overlay: 'rgba(255,255,255,0.1)',
      theme: 'dark',
    }
    this.updateBackground(bgColor);
  }
  reset() {
    this.appStateService.applyReset();
  }
}
