import * as React from "react";
import { FunctionComponent } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { RULES } from "@mancala/core";
import RuleBoard from "./RuleBoard";

// Every rule in order with its text and example (docs/specs/tutorial, R1). `showLessons` adds a link to each lesson;
// left out where following it would leave a game.
const RulesView: FunctionComponent<{ showLessons?: boolean }> = ({ showLessons }) => {
    const { t } = useTranslation();
    return (
        <ol className="rules">
            {RULES.map((rule) => (
                <li key={rule.id} id={rule.id} className="rule panel">
                    <h2>{t(rule.titleKey)}</h2>
                    {rule.textKeys.map((key) => <p key={key}>{t(key)}</p>)}
                    {rule.example && <RuleBoard example={rule.example} />}
                    {showLessons && rule.lesson && (
                        <Link className="btn ghost try" to={`/learn/${rule.id}`}>{t("TryIt")}</Link>
                    )}
                </li>
            ))}
            <style jsx>{`
                .rules {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                }
                .rule {
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }
                h2 {
                    margin: 0;
                    font-size: 20px;
                    letter-spacing: -.01em;
                }
                p {
                    margin: 0;
                    color: var(--muted);
                    line-height: 1.5;
                }
                .rules :global(.try) {
                    align-self: flex-start;
                    text-decoration: none;
                }
            `}</style>
        </ol>
    );
};

export default RulesView;