import '../../design-system/styles.css';

export const designSystemStylesheet = '../../design-system/styles.css';

export type DesignSystemThemeId = 'warm' | 'cool' | 'dual';

export type DesignSystemTheme = {
  id: DesignSystemThemeId;
  label: string;
  description: string;
};

export const defaultDesignSystemTheme: DesignSystemThemeId = 'warm';
export const designSystemThemeStorageKey = 'ctv-theme';

export const designSystemThemes: DesignSystemTheme[] = [
  {
    id: 'warm',
    label: 'Warm chicory',
    description: 'Warm chicory theme'
  },
  {
    id: 'cool',
    label: 'Cool periwinkle',
    description: 'Cool periwinkle theme'
  },
  {
    id: 'dual',
    label: 'Dual accent',
    description: 'Dual accent theme'
  }
];

function isDesignSystemTheme(value: string | null): value is DesignSystemThemeId {
  return value === 'warm' || value === 'cool' || value === 'dual';
}

function getStorage(): Storage | undefined {
  if (typeof window === 'undefined') {
    return undefined;
  }

  try {
    return window.localStorage;
  } catch {
    return undefined;
  }
}

export function getStoredDesignSystemTheme(): DesignSystemThemeId {
  const storedTheme = getStorage()?.getItem(designSystemThemeStorageKey) ?? null;

  return isDesignSystemTheme(storedTheme) ? storedTheme : defaultDesignSystemTheme;
}

export function applyDesignSystemTheme(theme: DesignSystemThemeId): void {
  if (theme === defaultDesignSystemTheme) {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.dataset.theme = theme;
  }

  getStorage()?.setItem(designSystemThemeStorageKey, theme);
}