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";
import DjTooltip from "@/DjTooltip.tsx";

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

        const rpArticles = useAsyncState("rp-articles", ({ hostUrl }) => getDjAPI(hostUrl, "/rp-articles"));

        await rpArticles.done;

        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.result.value && rpArticles.result.value.map((_) => (
                                <li>
                                    <DjTooltip tooltip={`Englischer Titel: <em>»${ _.titleEn }«</em>`}>
                                        {_.tags?.includes('in-arbeit') 
                                            ? _.titleDe
                                            : (
                                                <RouterLink to={{ name: "GEDeutschArticle", params: { articleName: _.slug } }}>
                                                    {_.titleDe}
                                                </RouterLink>
                                            )}
                                        {_.tags?.map(tag => <span class="tag">{tag}</span>)}
                                    </DjTooltip>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <hr />
                    <h3>Geplante Artikel (mit Link zum Original)</h3>
                    <div class="text-slab">
                        <ul>
                            <li><a href="http://raypeat.com/articles/articles/dark-side-of-stress-learned-helplessness.shtml">The dark side of stress (learned helplessness)</a></li>
                            <li><a href="http://raypeat.com/articles/articles/vegetables.shtml">Vegetables etc. - Who Defines Food?</a></li>
                            <li><a href="http://raypeat.com/articles/articles/glucose-sucrose-diabetes.shtml">Glucose and sucrose for diabetes</a></li>
                            <li><a href="http://raypeat.com/articles/articles/milk.shtml">Milk in context: allergies, ecology, and some myths</a></li>
                            <li><a href="http://raypeat.com/articles/articles/gelatin.shtml">Gelatin, stress, longevity</a></li>
                            <li><a href="http://raypeat.com/articles/articles/unsaturatedfats.shtml">Unsaturated fatty acids: Nutritionally essential, or toxic?</a></li>
                        </ul>
                        <DjEmail>Schick mir deine Vorschläge!</DjEmail>
                    </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 besseren Verständnis meines Körpers und dem Zurückerlangen 
                            meiner Gesundheit beigetragen hat, und sein Nachlass in Deutschland kaum Publikum genießt, habe ich 
                            einige seiner Artikel ins Deutsche übersetzt, damit mehr Leute wie ich von seinen Ideen und Ratschlägen profieren können. 
                        </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>
            </>;
    },
});
