import React, { useCallback } from "react";
import { usePerformanceMonitor } from "../../recoil/usePerformanceMonitor";

interface Props {
  settings: {
    autoChange: boolean;
    changeInterval: number;
    upscaleEnabled: boolean;
  };
  onSettingsChange: (settings: Props["settings"]) => void;
}

export const WallpaperSettings: React.FC<Props> = ({ settings, onSettingsChange }) => {
  usePerformanceMonitor("WallpaperSettings");

  const handleAutoChangeToggle = useCallback(() => {
    onSettingsChange({
      ...settings,
      autoChange: !settings.autoChange,
    });
  }, [settings, onSettingsChange]);

  const handleIntervalChange = useCallback(
    (event: React.ChangeEvent<HTMLSelectElement>) => {
      onSettingsChange({
        ...settings,
        changeInterval: parseInt(event.target.value, 10),
      });
    },
    [settings, onSettingsChange],
  );

  const handleUpscaleToggle = useCallback(() => {
    onSettingsChange({
      ...settings,
      upscaleEnabled: !settings.upscaleEnabled,
    });
  }, [settings, onSettingsChange]);

  return (
    <div className='wallpaper-settings' role='form'>
      <h2>Settings</h2>
      <div className='setting-group'>
        <label>
          <input
            type='checkbox'
            checked={settings.autoChange}
            onChange={handleAutoChangeToggle}
            aria-label='Enable automatic wallpaper changes'
          />
          Auto-change wallpapers
        </label>
      </div>

      <div className='setting-group'>
        <label htmlFor='change-interval'>Change interval:</label>
        <select
          id='change-interval'
          value={settings.changeInterval}
          onChange={handleIntervalChange}
          disabled={!settings.autoChange}
          aria-label='Select wallpaper change interval'
        >
          <option value={3600}>Every hour</option>
          <option value={7200}>Every 2 hours</option>
          <option value={14400}>Every 4 hours</option>
          <option value={28800}>Every 8 hours</option>
          <option value={86400}>Every day</option>
        </select>
      </div>

      <div className='setting-group'>
        <label>
          <input
            type='checkbox'
            checked={settings.upscaleEnabled}
            onChange={handleUpscaleToggle}
            aria-label='Enable AI upscaling'
          />
          Enable AI upscaling
        </label>
      </div>
    </div>
  );
};