import React, { useState, useEffect } from 'react';
import { VolumeHigh, VolumeLow, VolumeSlash } from 'iconsax-react';
import { useNotificationSound } from '@/hooks/useNotificationSound';

interface SoundSettingsProps {
    className?: string;
}

export const SoundSettings: React.FC<SoundSettingsProps> = ({ className = '' }) => {
    const [isEnabled, setIsEnabled] = useState(true);
    const [volume, setVolume] = useState(0.7);

    const { playSound } = useNotificationSound({
        enabled: isEnabled,
        volume: volume,
    });

    // Load settings from localStorage on mount
    useEffect(() => {
        const savedEnabled = localStorage.getItem('notificationSoundEnabled');
        const savedVolume = localStorage.getItem('notificationSoundVolume');

        if (savedEnabled !== null) {
            setIsEnabled(savedEnabled === 'true');
        }
        if (savedVolume !== null) {
            setVolume(parseFloat(savedVolume));
        }
    }, []);

    // Save settings to localStorage when changed
    useEffect(() => {
        localStorage.setItem('notificationSoundEnabled', isEnabled.toString());
        localStorage.setItem('notificationSoundVolume', volume.toString());
    }, [isEnabled, volume]);

    const handleVolumeChange = (newVolume: number) => {
        setVolume(newVolume);
        if (isEnabled) {
            // Test sound with new volume
            setTimeout(() => playSound(), 100);
        }
    };

    const toggleSound = () => {
        const newEnabled = !isEnabled;
        setIsEnabled(newEnabled);
        if (newEnabled) {
            // Test sound when enabling
            setTimeout(() => playSound(), 100);
        }
    };

    const getVolumeIcon = () => {
        if (!isEnabled) return <VolumeSlash size={18} color="gray" />;
        if (volume < 0.3) return <VolumeLow size={18} color="black" />;
        return <VolumeHigh size={18} color="black" />;
    };

    return (
        <div className={`flex items-center gap-3 ${className}`}>
            {/* Sound Toggle */}
            <button
                onClick={toggleSound}
                className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                title={isEnabled ? 'غیرفعال کردن صدا' : 'فعال کردن صدا'}
            >
                {getVolumeIcon()}
            </button>

            {/* Volume Slider */}
            {isEnabled && (
                <div className="flex items-center gap-2">
                    <input
                        type="range"
                        min="0"
                        max="1"
                        step="0.1"
                        value={volume}
                        onChange={(e) => handleVolumeChange(parseFloat(e.target.value))}
                        className="w-20 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
                        title={`حجم صدا: ${Math.round(volume * 100)}%`}
                    />
                    <span className="text-xs text-gray-500 min-w-[30px]">
                        {Math.round(volume * 100)}%
                    </span>
                </div>
            )}
        </div>
    );
}; 