import { useState, useEffect } from 'react';

export type HighlightLinksOptions = 'default' | 'highlight';
export type StoredHighlightLinksOptions = HighlightLinksOptions | null;

export type UseHighlightLinksResult = [
  HighlightLinksOptions,
  (selectedHighlightLinks: HighlightLinksOptions) => void,
];

export const useHighlightLinks = (): UseHighlightLinksResult => {
  const storedHighlightLinks = localStorage.getItem(
    '--theme-highlight-links'
  ) as StoredHighlightLinksOptions;

  const [highlightLinks, changeHighlightLinks] =
    useState<HighlightLinksOptions>(storedHighlightLinks || 'default');

  useEffect(() => {
    if (highlightLinks === 'highlight') {
      document.documentElement.classList.add(`ds-highlight-links`);
    } else {
      document.documentElement.classList.remove(`ds-highlight-links`);
    }
    localStorage.setItem('--theme-highlight-links', highlightLinks);
  }, [highlightLinks]);

  useEffect(() => {
    const beforePrintListener = () => {
      document.documentElement.classList.remove(`ds-highlight-links`);
    };
    const afterPrintListener = () => {
      document.documentElement.classList.add(
        localStorage.getItem('--theme-highlight-links') === 'highlight'
          ? `ds-highlight-links`
          : ''
      );
    };
    window.addEventListener('beforeprint', beforePrintListener);
    window.addEventListener('afterprint', afterPrintListener);
    return () => {
      window.removeEventListener('beforeprint', beforePrintListener);
      window.removeEventListener('afterprint', afterPrintListener);
    };
  }, []);

  return [highlightLinks, changeHighlightLinks];
};

export default useHighlightLinks;