import { DarkModeColorTokens as NewBrandingDarkModeColorTokens } from '../../../constants/tokens/themes/v2-new-brand/dark-mode-color-tokens';
import { DarkModeBorderTokens as NewBrandingDarkModeBorderTokens } from '../../../constants/tokens/themes/v2-new-brand/dark-mode-border-tokens';
import { DarkModeShadowTokens as NewBrandingDarkModeRingTokens } from '../../../constants/tokens/themes/v2-new-brand/dark-mode-shadow-tokens';
import { DarkModeRingTokens as NewBrandingDarkModeShadowTokens } from '../../../constants/tokens/themes/v2-new-brand/dark-mode-ring-tokens';
import { DarkModeColorTokens } from '../../../constants/tokens/themes/dark-mode-color-tokens';
import { DarkModeBorderTokens } from '../../../constants/tokens/themes/dark-mode-border-tokens';
import { DarkModeShadowTokens } from '../../../constants/tokens/themes/dark-mode-shadow-tokens';
import { DarkModeRingTokens } from '../../../constants/tokens/themes/dark-mode-ring-tokens';
import { DARK_MODE_CHANGE } from '../../change-manager/subject/static-subject/static-subject-title';
import ChangeManager from '../../change-manager/change-manager';
import { Observer } from '../../change-manager/observer/observer';
import { VegaInternalThemeManager } from '../internal-theme-manager';
import { StyleControllerAbstract } from './style-controller.abstract';
import { htmlSanitizer, styleSanitizeStrategy } from '../../../utils/sanitize';
// TODO: Remove this after the token add in vega design.
const CustomDarkModeColorTokens = {
  'bg-backdrop-loading': '0, 0, 0, 0.5',
  'text-page-notification-content': DarkModeColorTokens['text-inverted-primary'],
  'bg-textarea-counter-exceed-max-length': '255, 87, 114',
  'bg-date-picker-range': '32, 54, 69, 1',
  'regular-credit-card-bg': '252, 252, 252, 1',
  'regular-credit-card-top': '4, 4, 28, 1',
  'regular-credit-card-bottom': '255, 255, 255, 1',
};
/**
 * Vega components dark mode style controller
 */
class DarkModeStyleController extends StyleControllerAbstract {
  constructor() {
    super();
    this.dynamicCustomDarkModeColor = {};
    this.themeStyleContainerKey = 'vegaDarkModeStyle';
    this.darkModeColorAllTokens = {};
    this.observer = new Observer(this.isAcceptObserver.bind(this), (isDark) => {
      if (isDark) {
        this.generateThemeStyle();
      }
      else {
        this.reset(this.themeStyleContainerKey);
      }
    });
    ChangeManager.register(DARK_MODE_CHANGE, this.observer);
  }
  /**
   * This method dynamically registers a custom dark color.
   *
   * @param {Record<string, string>} customDarkModeColor - custom dark mode color
   */
  registerCustomDarkModeColor(customDarkModeColor) {
    this.dynamicCustomDarkModeColor = Object.assign(Object.assign({}, this.dynamicCustomDarkModeColor), customDarkModeColor);
    this.generateThemeStyle();
  }
  /**
   * It generates a CSS style for dark mode to override the style.
   */
  generateThemeStyle() {
    const newBrandTokens = Object.assign(NewBrandingDarkModeColorTokens, NewBrandingDarkModeBorderTokens, NewBrandingDarkModeRingTokens, NewBrandingDarkModeShadowTokens);
    const oldTokens = Object.assign(DarkModeColorTokens, DarkModeBorderTokens, DarkModeRingTokens, DarkModeShadowTokens);
    this.darkModeColorAllTokens = Object.assign(VegaInternalThemeManager.getBranding() === 'heartland' ? oldTokens : newBrandTokens, CustomDarkModeColorTokens, this.dynamicCustomDarkModeColor);
    const keys = Object.keys(this.darkModeColorAllTokens);
    const styleString = `
html.dark {
\t\t${keys.map((key) => `--v-${key}: ${this.darkModeColorAllTokens[key]};`).join('\n\t\t')}}`;
    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = htmlSanitizer.sanitize(styleString, styleSanitizeStrategy);
  }
  /**
   * Determines whether the observer should accept changes.
   *
   * @returns {boolean} Always returns true in the current implementation.
   */
  isAcceptObserver() {
    return true;
  }
}
export const VegaDarkModeStyleController = new DarkModeStyleController();
