import {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {UserRound} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';

/**
 * Uses the art of this Steam game as banner or background of the public profile; a checked item removes it again.
 *
 * @param onSaved gets the whole saved style
 */
export default function ProfileArtMenu({appid, style, onSaved}) {
    const {t} = useTranslation();
    const save = useSaveProfileStyle();
    const [saving, setSaving] = useState(false);

    const toggle = async (field) => {
        setSaving(true);
        const saved = await save((stored) => ({[field]: stored[field] === appid ? null : appid}), style);
        if (saved) onSaved(saved);
        setSaving(false);
    };

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" disabled={saving}><UserRound/>{t('GAME_DETAIL.PROFILE_ART')}</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
                <DropdownMenuCheckboxItem checked={style.bannerAppid === appid} onCheckedChange={() => toggle('bannerAppid')}>
                    {t('GAME_DETAIL.PROFILE_BANNER')}
                </DropdownMenuCheckboxItem>
                <DropdownMenuCheckboxItem checked={style.backgroundAppid === appid}
                                          onCheckedChange={() => toggle('backgroundAppid')}>
                    {t('GAME_DETAIL.PROFILE_BACKGROUND')}
                </DropdownMenuCheckboxItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}