import {
  LanguageContext,
  languages,
} from "../component/Language/LanguageContext";

import React from "react";

const list = {
  german: [
    {
      link: "https://git.krakatoa.umbach.dev/Alex/lawn-mower",
      name: "Rasenroboter",
      description: "Autonom fahrender Rasenroboter",
      language: "Go, Python, React, WebSocket, ZeroMQ",
      date: "02/2022 - jetzt",
    },
    {
      name: "Serverentwicklung",
      description: "Erweiterungen entwickelt für ein Spiel",
      language: "Go, Java, Redis, MongoDB",
      date: "09/2021 - 01/2022",
    },
    {
      name: "Mobile App",
      description: "Swipe-App ähnlich wie TikTok",
      language: "ReactNative (Android & iOS), Go, RabbitMQ",
      date: "05/2021 - 08/2021",
    },
    {
      link: "https://git.krakatoa.umbach.dev/Alex/my-website",
      name: "Persönliche Webseite",
      description: "Veranschaulichung von Informationen",
      language: "React, JavaScript, CSS, HTML",
      date: "07/2021",
    },
    {
      link: "https://github.com/AlexanderRoese/PasswordManager",
      name: "Password Manager",
      description: "Selbstgehosteter verschlüsselter Passwort-Manager",
      language: "JavaScript, CSS, HTML, Node.JS",
      date: "03/2020 - 12/2020",
    },
  ],
  english: [
    {
      link: "https://git.krakatoa.umbach.dev/Alex/lawn-mower",
      name: "Lawn mower",
      description: "Autonomous driving lawn mower",
      language: "Go, Python, React, WebSocket, ZeroMQ",
      date: "02/2022 - now",
    },
    {
      name: "Server development",
      description: "Extensions developed for a game",
      language: "Go, Java, Redis, MongoDB",
      date: "09/2021 - 01/2022",
    },
    {
      name: "Mobile App",
      description: "Swipe app similar to tiktok",
      language: "ReactNative (Android & iOS), Go, RabbitMQ",
      date: "05/2021 - 08/2021",
    },
    {
      link: "https://git.krakatoa.umbach.dev/Alex/my-website",
      name: "This website",
      description: "Visualization of information",
      language: "React, JavaScript, CSS, HTML",
      date: "07/2021",
    },
    {
      link: "https://github.com/AlexanderRoese/PasswordManager",
      name: "Password Manager",
      description: "Self-hosted encrypted password manager",
      language: "JavaScript, CSS, HTML, Node.JS",
      date: "03/2020 - 12/2020",
    },
  ],
};

function RenderProjects(props) {
  if (props.language === languages.german) {
    return list.german.map((project, index) => (
      <tr key={"a" + index}>
        <td key={"b" + index}>
          {project.link === undefined ? (
            project.name
          ) : (
            <a href={project.link}>{project.name}</a>
          )}
        </td>
        <td key={"c" + index}>{project.description}</td>
        <td key={"d" + index}>{project.language}</td>
        <td key={"e" + index}>{project.date}</td>
      </tr>
    ));
  }

  return list.english.map((project, index) => (
    <tr key={"a" + index}>
      <td key={"b" + index}>
        {project.link === undefined ? (
          project.name
        ) : (
          <a href={project.link}>{project.name}</a>
        )}
      </td>
      <td key={"c" + index}>{project.description}</td>
      <td key={"d" + index}>{project.language}</td>
      <td key={"e" + index}>{project.date}</td>
    </tr>
  ));
}

export default function Projects() {
  return (
    <LanguageContext.Consumer>
      {({ language }) => (
        <div id="modal-projects" className="modal">
          <h2>{language.pages.projects.title}</h2>
          <p>{language.pages.projects.description}</p>

          <div>
            <table>
              <tbody>
                <tr>
                  <th>Name</th>
                  <th>{language.pages.projects.tableTh.description}</th>
                  <th>{language.pages.projects.tableTh.language}</th>
                  <th>{language.pages.projects.tableTh.date}</th>
                </tr>

                <RenderProjects language={language} />
              </tbody>
            </table>
          </div>
        </div>
      )}
    </LanguageContext.Consumer>
  );
}
