import { addClass, hasClass, removeClass } from '@eciol/shared';

import { useRootSetting } from '../setting';
import { changeTheme } from './index';

export async function updateDarkTheme(mode: string | null = 'light') {
  const { getThemeColor } = useRootSetting();
  const htmlRoot = document.getElementById('htmlRoot');
  if (!htmlRoot) {
    return;
  }
  const hasDarkClass = hasClass(htmlRoot, 'dark');
  if (mode === 'dark') {
    htmlRoot.setAttribute('data-theme', 'dark');
    if (!hasDarkClass) {
      addClass(htmlRoot, 'dark');
    }
  } else {
    htmlRoot.setAttribute('data-theme', 'light');
    if (hasDarkClass) {
      removeClass(htmlRoot, 'dark');
    }
  }
  changeTheme(getThemeColor.value);
}