import { MDCTooltip } from '@material/tooltip';

import { createPlainTooltip } from '../../../../common/tooltip.js';
import { createExtBadge } from '../../../../contentScripts/communityConsole/utils/common.js';

export const kColorThemeMode = Object.freeze({
  Auto: Symbol('auto'),
  Light: Symbol('light'),
  Dark: Symbol('dark'),
});

export function injectDarkThemeButton(rightControl) {
  var darkThemeSwitch = document.createElement('material-button');
  darkThemeSwitch.classList.add('TWPT-dark-theme', 'TWPT-btn--with-badge');
  darkThemeSwitch.setAttribute('button', '');

  darkThemeSwitch.addEventListener('click', () => {
    chrome.storage.sync.get(null, (currentOptions) => {
      currentOptions.ccdarktheme_switch_status =
        !currentOptions.ccdarktheme_switch_status;
      chrome.storage.sync.set(currentOptions);
    });
  });

  var switchContent = document.createElement('div');
  switchContent.classList.add('content');

  var icon = document.createElement('material-icon');

  var i = document.createElement('i');
  i.classList.add('material-icon-i', 'material-icons-extended');
  i.textContent = 'brightness_4';

  icon.appendChild(i);
  switchContent.appendChild(icon);
  darkThemeSwitch.appendChild(switchContent);

  let badgeContent, badgeTooltip;
  [badgeContent, badgeTooltip] = createExtBadge();

  darkThemeSwitch.appendChild(badgeContent);

  rightControl.style.width =
    parseInt(window.getComputedStyle(rightControl).width) + 58 + 'px';
  rightControl.insertAdjacentElement('afterbegin', darkThemeSwitch);

  createPlainTooltip(
    switchContent,
    chrome.i18n.getMessage('inject_ccdarktheme_helper'),
  );
  new MDCTooltip(badgeTooltip);
}

export function getCurrentColorTheme(options) {
  if (!options.ccdarktheme) {
    return kColorThemeMode.Light;
  } else {
    if (options.ccdarktheme_mode == 'switch') {
      return options.ccdarktheme_switch_status
        ? kColorThemeMode.Dark
        : kColorThemeMode.Light;
    } else {
      return kColorThemeMode.Auto;
    }
  }
}

export function isDarkThemeOn(options) {
  const activeColorTheme = getCurrentColorTheme(options);

  switch (activeColorTheme) {
    case kColorThemeMode.Auto:
      return (
        window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches
      );

    case kColorThemeMode.Light:
      return false;

    case kColorThemeMode.Dark:
      return true;
  }
}