import { useState, useEffect } from 'react';

type FontSizeClass = 'text-size-sm' | 'text-size-md' | 'text-size-lg' | 'text-size-xl';

interface ReadingSettings {
  fontSize: FontSizeClass;
  zenMode: boolean;
  darkMode: boolean;
}

export function useReadingSettings() {
  const [settings, setSettings] = useState<ReadingSettings>(() => {
    // Get settings from localStorage if available
    const savedSettings = localStorage.getItem('reading-settings');
    if (savedSettings) {
      return JSON.parse(savedSettings);
    }
    
    // Default settings
    return {
      fontSize: 'text-size-md',
      zenMode: false,
      darkMode: false
    };
  });

  // Update localStorage when settings change
  useEffect(() => {
    localStorage.setItem('reading-settings', JSON.stringify(settings));
  }, [settings]);

  // Function to increase font size
  const increaseFontSize = () => {
    setSettings(prev => {
      const sizes: FontSizeClass[] = ['text-size-sm', 'text-size-md', 'text-size-lg', 'text-size-xl'];
      const currentIndex = sizes.indexOf(prev.fontSize);
      const nextIndex = Math.min(currentIndex + 1, sizes.length - 1);
      return { ...prev, fontSize: sizes[nextIndex] };
    });
  };

  // Function to decrease font size
  const decreaseFontSize = () => {
    setSettings(prev => {
      const sizes: FontSizeClass[] = ['text-size-sm', 'text-size-md', 'text-size-lg', 'text-size-xl'];
      const currentIndex = sizes.indexOf(prev.fontSize);
      const nextIndex = Math.max(currentIndex - 1, 0);
      return { ...prev, fontSize: sizes[nextIndex] };
    });
  };

  // Function to toggle zen mode
  const toggleZenMode = () => {
    setSettings(prev => ({ ...prev, zenMode: !prev.zenMode }));
  };

  return {
    settings,
    increaseFontSize,
    decreaseFontSize,
    toggleZenMode,
  };
}
