import { defineComponent } from "vue";
import { RouterLink } from "vue-router";
import DJEmail from "@/DJEmail.tsx";
import useHead from "@/useHead.ts";
import useAsyncState from "@/useAsyncState.ts";
import getDJAPI from "@/api.ts";

export default defineComponent({
    name: "ge-deutsch",
    async setup() {
        useHead({ title: "Ray Peat Artikel auf Deutsch" });

        const {
            result: rpArticles,
            stateIsReady,
        } = useAsyncState("rp-articles", ({ hostUrl }) => getDJAPI(hostUrl, "/rp-articles"));

        await stateIsReady;
        return () => <>
                <header>
                    <h1>Ray Peat Deutsche Übersetzungen</h1>
                </header>
                <section>
                    <p class="text-slab">
                        Auf dieser Seite befindet sich eine Auswahl der Artikel von Dr. Raymond Peat, die ich in meiner
                        Freizeit ins Deutsche übersetzt habe. Die Originale mit Quellenverzeichnis sind am Ende des jeweiligen Artikels verlinkt.
                    </p>
                    <h2>Artikelliste</h2>
                    <div class="text-slab">
                        <ul id="article">
                            {rpArticles.value && rpArticles.value.map((_) => (
                                <li>
                                    <RouterLink to={{ name: "GEDeutschArticle", params: { articleName: _.slug } }}>
                                        {_.titleDe}
                                    </RouterLink>
                                    {_.tags?.map(tag => <span class="tag">{tag}</span>)}
                                </li>
                            ))}
                        </ul>
                    </div>
                </section>
                <section>
                    <h3>Zu Ray</h3>
                    <div class="text-slab">
                        <p>
                            Ray Peat war ein US-Amerikaner aus Eugene, Oregon, der neben seinem Studium von Linguistik,
                            Literatur, und Malerei eine Promotion in der Biologie und Physiologie des Alterns und
                            degenerativer Krankheiten absolvierte, mit besonderem Fokus auf Zellen-Stoffwechsel, Hormone,
                            und Ernährungsphysiologie.
                        </p>
                        <p>
                            Nach mehreren Jahren als Professor an diversen Universitäten in den USA und Mexiko begann er
                            Artikel in Form eines Newsletters herauszugeben, von denen mehrere auf{" "}
                            <a href="http://raypeat.com/">seiner Website</a> zu finden sind.
                        </p>
                        <p>
                            Da er in meinem Leben zu einem enormen Verständnis meines Körpers und einem unglaublichen
                            Zurückerlangen meiner Gesundheit und meines Wohlbefindens trotz dem Scheitern mehrerer Ärzte
                            beigetragen hat, und sein Nachlass in Deutschland kaum Publikum aufgrund schwieriger
                            physiologischer Texte genießt, habe ich entschieden hauptsächlich für Freunde und Bekannte
                            einige seiner Artikel ins Deutsche zu übersetzen, damit vielleicht auch ein breiteres Publikum
                            von seinen Ideen profitieren könnte.
                        </p>
                    </div>
                    <h3>Helfen</h3>
                    <p class="text-slab">
                        Falls was bei der Übersetzung auffällt oder besonders unidiomatisch klingt, bzw. der deutschen
                        Fachsprache der Medizin nicht gerecht sein sollte, kannst du mir unter <DJEmail />{" "}
                        eine Mail senden. Meine Muttersprache ist schließlich Englisch und ich bin kein professioneller
                        Übersetzer!
                        Falls jemand Hilfe leisten möchte, sag gerne Bescheid!
                    </p>
                    <h3>Bedienung</h3>
                    <p class="text-slab">
                        Zusätzlich zu der Funktion, den Artikel mit dem Button oben in der Originalversion anzusehen,
                        hat jeder Absatz oben rechts beim drüberhovern mit der Maus einen zusätzlichen Button über den
                        man den jeweiligen Absatz in die andere Sprache wechseln kann, um die Versionen beim Lesen
                        schnell zu vergleichen zu können.
                    </p>
                </section>
            </>;
    },
});