import { getGlobalStates } from '@wener/utils';
import { createStore, useStore } from 'zustand';
import { mutative } from 'zustand-mutative';

export interface UserAgentPreferences {
  colorTheme: 'light' | 'dark';
  contrast: 'no-preference' | 'more' | 'less' | 'custom';
  reducedMotion: 'no-preference' | 'reduce';
  reducedData: 'no-preference' | 'reduce';
  reducedTransparency: 'no-preference' | 'reduce';
  devicePixelRatio: number; // zooming, screen resolution
}

export function getUserAgentPreferenceStore() {
  return getGlobalStates('UserAgentPreferenceStore', () => {
    return createUserAgentPreferenceStore();
  });
}

export function getUserAgentPreferences(): UserAgentPreferences {
  return getUserAgentPreferenceStore().getState();
}

export function useUserAgentPreferences() {
  return useStore(getUserAgentPreferenceStore());
}

function createUserAgentPreferenceStore({ watch = true }: { watch?: boolean } = {}) {
  return createStore(
    mutative<
      UserAgentPreferences & {
        close: () => void;
        reset: () => void;
      }
    >((setState, getState, store) => {
      let initial: UserAgentPreferences = {
        colorTheme: 'light',
        contrast: 'no-preference',
        reducedMotion: 'no-preference',
        reducedData: 'no-preference',
        reducedTransparency: 'no-preference',
        devicePixelRatio: globalThis.devicePixelRatio ?? 1,
      };

      const closer: (() => void)[] = [];
      let reset: () => void = () => undefined;
      if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') {
      } else {
        let resolution = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
        let prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)');
        let prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
        let prefersReducedData = window.matchMedia('(prefers-reduced-data: reduce)');
        let prefersReducedTransparency = window.matchMedia('(prefers-reduced-transparency: reduce)');
        let prefersContrast = window.matchMedia('(prefers-contrast: more)');

        let set = (out: UserAgentPreferences) => {
          out.colorTheme = prefersColorScheme.matches ? 'dark' : 'light';
          out.reducedMotion = prefersReducedMotion.matches ? 'reduce' : 'no-preference';
          out.reducedData = prefersReducedData.matches ? 'reduce' : 'no-preference';
          out.reducedTransparency = prefersReducedTransparency.matches ? 'reduce' : 'no-preference';
          out.contrast = prefersContrast.matches ? 'more' : 'no-preference';
          out.devicePixelRatio = globalThis.devicePixelRatio ?? 1;
        };

        // initial
        set(initial);

        const allQuery = [
          prefersColorScheme,
          prefersReducedMotion,
          prefersReducedData,
          prefersReducedTransparency,
          prefersContrast,
          resolution,
        ];
        const onChange = () => {
          setState((s) => {
            set(s);
            return s;
          });
        };
        reset = onChange;
        if (watch) {
          for (let query of allQuery) {
            query.addEventListener('change', onChange);
            closer.push(() => query.removeEventListener('change', onChange));
          }
        }
      }

      return {
        ...initial,
        close: () => {
          for (let c of closer) {
            c();
          }
          closer.splice(0, closer.length);
        },
        reset,
      };
    }),
  );
}