import { ColorPalette } from '@lendi-ui/commons/colours';
import { isBrowser, StoredTheme, themeAttribute, ThemeName } from '@lendi-ui/commons/utils';
import { ColorPrefixes, colorPrefixes, ColorsMap } from '../types';

const capitalizeFirstLetter = (string: string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
};

/**
 * Custom setThemeName function
 *
 * At runtime, it sets the correct theme to the `document`
 *
 * It replys on `document` `data-attributes` as primary mechanism,
 * ans `sessionStoryage` as a backup mechanism.
 *
 * It works in conjunction with Custom getThemeName from `@lendi-ui/commons`
 *
 * @deprecated Deprecated since 0.2.3. Use SC's Theme instead.
 */
export const setThemeName = (themeName: ThemeName) => {
  // Check browser for runtime
  if (isBrowser) {
    // Get `theme` from DOM `data-attributes` if it's already available.
    const dataTheme = window?.document.documentElement.getAttribute(themeAttribute) as StoredTheme;

    // Check `domTheme` against provided runtime `themeName`
    if (dataTheme !== themeName) {
      // If different, set runtime `themeName` to data-attributes
      window?.document.documentElement.setAttribute(themeAttribute, themeName);

      // If different, set runtime `themeName` to sessionStorage
      try {
        const themeValue = JSON.stringify({ label: capitalizeFirstLetter(themeName), value: themeName });
        window.sessionStorage.setItem('theme', themeValue);
      } catch (error) {
        // TODO: Report Error
      }
    }
  }
};

export const mapToColorsLegacyFormat = (colorToken: ColorPalette<string>): ColorsMap => {
  let colors = {};
  const categories = Object.keys(colorToken);

  const shouldInclude = (category: string) => colorPrefixes.includes(category);

  categories.filter(shouldInclude).map((category: ColorPrefixes) => {
    const transparencies = Object.keys(colorToken[category]);
    transparencies.map((transparency) => {
      colors = {
        ...colors,
        [`${category}.${transparency}`]: colorToken[category][transparency],
      };
    });
  });
  return colors as ColorsMap;
};