import { JSX, MouseEvent } from 'react';

import { Icon } from './Icon';
import { DownloadProgress } from './DownloadProgress';
import { Game, InstallStatus } from '../lib/types';
import { actionLabel, primaryActionFor, PrimaryAction } from '../lib/gameState';

interface Props {
    game: Game;
    size?: 'md' | 'lg';
    full?: boolean;
    onClick: () => void;
    onCancelDownload?: (game: Game) => void;
}

const ICON_FOR_ACTION: Partial<Record<PrimaryAction, JSX.Element>> = {
    play: <Icon.play />,
    install: <Icon.install />,
    update: <Icon.install />,
    download: <Icon.download />,
};

/** Color-coded primary action: Play / Install / Update / Download / busy. */
export const ActionButton = ({
    game,
    size = 'md',
    full = false,
    onClick,
    onCancelDownload,
}: Props) => {
    const action = primaryActionFor(game);
    const isDownloading = game.install_status === InstallStatus.Downloading;
    if (isDownloading) {
        return (
            <DownloadProgress
                game={game}
                size={size}
                full={full}
                onCancel={size === 'lg' ? onCancelDownload : undefined}
            />
        );
    }

    const cls = [
        'act-btn',
        `act-${action}`,
        size === 'lg' ? 'act-lg' : '',
        full ? 'act-full' : '',
    ].filter(Boolean).join(' ');
    const disabled = action === 'busy' || action === 'disabled';

    const handle = (e: MouseEvent<HTMLButtonElement>) => {
        e.stopPropagation();
        if (disabled) return;
        onClick();
    };

    return (
        <button className={cls} onClick={handle} disabled={disabled}>
            {ICON_FOR_ACTION[action]}
            <span className="act-label">{actionLabel(game)}</span>
        </button>
    );
};