import * as React from "react";
import { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
import { BOT_LEVELS, BotLevel, getBotLevelTextKey, getLastBotLevel, setLastBotLevel } from "@mancala/core";
import { Context } from "../context/context";

// The four bot levels as buttons; the level chosen last is highlighted and remembered on this device.
const BotLevelPicker: FunctionComponent<{ context: Context, onChoose: (level: BotLevel) => void }> = ({ context, onChoose }) => {
    const { t } = useTranslation();
    const lastLevel = getLastBotLevel(context.storage);
    const choose = (level: BotLevel) => {
        setLastBotLevel(context.storage, level);
        onChoose(level);
    };
    return (
        <div className="levels" role="group" aria-label={t("ChooseBotLevel")}>
            {BOT_LEVELS.map((level) => (
                <button key={level} className={`btn ${level === lastLevel ? "pri" : "ghost"}`} onClick={() => choose(level)}>
                    {t(getBotLevelTextKey(level))}
                </button>
            ))}
            <style jsx>{`
                .levels {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 8px;
                }
            `}</style>
        </div>
    );
};

export default BotLevelPicker;