import { LanguageContext } from "./Language/LanguageContext";
import React from "react";
import discord from "../img/discord.png";
import englandFlag from "../img/england.png";
import germanyFlag from "../img/germany.png";
import gitea from "../img/gitea.png";
import github from "../img/github.png";

export default class Sidebar extends React.Component {
  render() {
    return (
      <LanguageContext.Consumer>
        {({ changeLanguage }) => (
          <div className="sidebar">
            <ul>
              <SidebarElements changeLanguage={changeLanguage} />
            </ul>
          </div>
        )}
      </LanguageContext.Consumer>
    );
  }
}

export function SidebarElements(props) {
  return (
    <>
      <li>
        <a
          href="https://git.krakatoa.umbach.dev/Alex"
          target="_blank"
          rel="noreferrer"
        >
          <img src={gitea} alt="gitea" />
        </a>
      </li>
      <li>
        <a
          href="https://github.com/AlexanderRoese"
          target="_blank"
          rel="noreferrer"
        >
          <img src={github} alt="github" />
        </a>
      </li>
      <li>
        <a
          href="https://discordapp.com/users/444509946902609941"
          target="_blank"
          rel="noreferrer"
        >
          <img src={discord} alt="discord" />
        </a>
      </li>
      <hr />
      <li onClick={() => props.changeLanguage("de")}>
        <img src={germanyFlag} alt="germany" />
      </li>
      <li onClick={() => props.changeLanguage("en")}>
        <img src={englandFlag} alt="england" />
      </li>
    </>
  );
}

export function sidebarOnresize() {
  sidebarVisibility();
}

export function sidebarOnload() {
  sidebarVisibility();
}

function sidebarVisibility() {
  let sidebar = document.querySelector(".sidebar");

  window.screen.width > 600
    ? sidebar.setAttribute("style", "visibility: visible;")
    : sidebar.setAttribute("style", "visibility: hidden;");
}
