import * as React from "react";
import { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
import { Context } from "../../context/context";
import { getWebTheme, webThemes } from "../../theme/themes";

const ThemeSwatches: FunctionComponent<{ context: Context }> = ({ context }) => {
    const { t } = useTranslation();
    const current = getWebTheme(context.themeManager.theme);
    return (
        <div className="themes" role="group" aria-label={t("ChooseTheme")}>
            {webThemes.map((theme) => (
                <button
                    key={theme.id}
                    className={"sw" + (theme === current ? " on" : "")}
                    aria-label={t(theme.labelKey)}
                    aria-pressed={theme === current}
                    onClick={() => (context.themeManager.theme = theme)}>
                    <span style={{ background: `linear-gradient(135deg, ${theme.swatch.board} 0 50%, ${theme.swatch.accent} 50% 100%)` }} />
                </button>
            ))}
        </div>
    );
};

export default ThemeSwatches;