import { useState, useEffect } from 'react';

export interface VariantVarsOptions {
  name: string;
  variables: string[];
  variants: string[];
}

export type UseVariantVarsResult<T> = [T, (value: T) => void];

function useVariantVars({
  name,
  variables,
  variants,
}: VariantVarsOptions): UseVariantVarsResult<any> {
  const root = document.documentElement;
  const storedValue = localStorage.getItem(`--theme-${name}`);
  const [value, setValue] = useState(storedValue || variants[0]);

  useEffect(() => {
    localStorage.setItem(`--theme-${name}`, value);
    variables.forEach((varName) => {
      root.style.setProperty(`--${varName}`, `var(--${varName}-${value})`);
    });
  }, [value]);
  function changeValue(v: string) {
    setValue(v);
  }
  return [value, changeValue];
}

export default useVariantVars;