import {useTranslation} from 'react-i18next';
import {Trophy} from 'lucide-react';

import {Button} from '@/components/ui/button';
import StatsSection from './StatsSection.jsx';
import ChartPicker from './ChartPicker.jsx';
import GamePlayChart from './GamePlayChart.jsx';
import GameRow from './GameRow.jsx';
import {useStatDrill} from './StatDrill.jsx';
import {formatPlaytime} from '../../utils/games.js';
import {playChart} from '../../utils/statCharts.js';

/**
 * @param chart LIST, BARS, PIE or DONUT
 * @param onChart `(form)`: shows the picker
 */
export default function TopGamesStats({topGames, linked = true, chart = 'LIST', onChart}) {
    const {t} = useTranslation();
    const drill = useStatDrill();
    const max = Math.max(1, ...topGames.mostPlayed.map((g) => g.minutes));
    const form = playChart(chart, topGames.mostPlayed);
    return (
        <StatsSection title={t('STATS.TOP_GAMES.TITLE')} icon={Trophy}
                      action={onChart && <ChartPicker group="TOP_GAMES" value={chart} onChange={onChart}/>}>
            {topGames.mostPlayed.length === 0 ? (
                <p className="text-sm text-muted-foreground">{t('STATS.TOP_GAMES.EMPTY')}</p>
            ) : form === 'LIST' ? (
                <ol className="space-y-2">
                    {topGames.mostPlayed.map((g) => (
                        <li key={g.appid}><GameRow game={g} value={formatPlaytime(g.minutes)} linked={linked}
                                                share={g.minutes / max}/></li>
                    ))}
                </ol>
            ) : <GamePlayChart games={topGames.mostPlayed} chart={form} linked={linked}/>}
            {drill && topGames.mostPlayed.length > 0 && (
                <Button variant="ghost" size="sm" className="self-start max-sm:min-h-11"
                        onClick={() => drill.open(t('STATS.TOP_GAMES.TITLE'), {key: 'MOST_PLAYED'})}>
                    {t('STATS.DRILL.SHOW_ALL')}
                </Button>
            )}
            {topGames.mostLoyal && (
                <div className="space-y-2">
                    <span className="text-sm font-medium">{t('STATS.TOP_GAMES.LOYAL')}</span>
                    <GameRow game={topGames.mostLoyal} linked={linked}
                             value={t('STATS.TOP_GAMES.MONTHS', {count: topGames.mostLoyal.months})}/>
                </div>
            )}
        </StatsSection>
    );
}