import React from "react";
import styled from "styled-components";
import { StaticImage } from "gatsby-plugin-image";
import SEO from "../components/SEO";
import "../styles/main.css";
import { FaMastodon } from "react-icons/fa";

const TIMESTAMP = "1631045797";
const SHORT_CHARS = [
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  "j",
  "k",
  "l",
  "m",
  "n",
  "o",
  "p",
  "q",
  "r",
  "s",
  "t",
  "u",
  "v",
  "w",
  "x",
  "y",
  "z",
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
];

function toShort(valu: number): string {
  return valu
    .toString()
    .match(/.{1,2}/g)
    .map((s) => SHORT_CHARS[parseInt(s)])
    .join("");
}

function getTimestamp(seconds: number): string {
  const date = new Date(seconds * 1000);
  const year = date.getUTCFullYear();
  const month = date.getUTCMonth();
  const day = date.getUTCDate();
  const hour = date.getUTCHours();
  const minute = date.getUTCMinutes();
  return (
    toShort(year) +
    "." +
    toShort(month) +
    "." +
    toShort(day) +
    "." +
    toShort(hour) +
    "." +
    toShort(minute) +
    "-0"
  );
}

// styles
const StyledContainer = styled.div`
  div#content {
    width: 350px;
    margin: 0px auto;
    margin-bottom: 120px;
    padding-top: 136px;
  }
  div#header {
    text-align: center;
    pointer-events: none;
    user-select: none;
  }
  div#tagline {
    background-color: #000;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
  }
  div#info {
    padding: 4px 8px;
  }
  div#info a,
  div#info a:visited,
  div#info a:hover {
    text-decoration: none;
    color: #000;
    padding: 1px 3px;
  }
  div#info a,
  div#info a:visited {
    background-color: #e1e1e1;
  }
  div#info a:hover {
    background-color: #d5d5d5;
  }
  div#info,
  div.link {
    background-color: #fff;
    border: 1px #000 solid;
    border-left: 3px #000 solid;
    border-right: 3px #000 solid;
  }
  div.link,
  div#tagline {
    margin-top: 3px;
  }
  div.link > a,
  div.link > a:visited,
  div.link > a:active {
    padding: 8px;
    width: 328px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #666;
  }
  div.link:hover {
    background-color: #ddd;
    color: #222;
  }
  div.link:last-child,
  div.link:last-child > a {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }
  q,
  p,
  em {
    display: block;
    text-indent: 28px;
  }

  p {
    margin: 0px 0px 16px;
  }

  div#meta {
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    text-align: center;
    font-size: 12px;
  }
  div#meta > span {
    background-color: #e1e1e1;
  }
`;

// markup
const IndexPage = () => {
  return (
    <main>
      <SEO title="Kevin J Hoerr <kjhoerr@submelon.tech>" />
      <StyledContainer>
        <div id="content">
          <div id="header">
            <StaticImage
              src="../images/main.png"
              alt="Kevin J Hoerr"
              placeholder="blurred"
              layout="fixed"
              width={340}
              height={340}
            />
          </div>
          <div id="tagline">Hello!</div>
          <div id="info">
            <p>
              I'm a computer science and math graduate from Millersville
              University. I work as an IT consultant and specialize in
              development operations and systems validation for web
              applications.
            </p>
            <p>
              My most recent projects have been focused on full-stack
              development. I use Kubernetes for orchestration, NextJS for
              front-end, and rust+actix-web for my backend services with GraphQL
              serving as the public API.
            </p>
            <p>
              This site was recently rebuilt using GatsbyJS since the instance
              formerly holding this website broke during upgrades. Thank
              goodness for backups.
            </p>
            <em>- Kevin H.</em>
          </div>
          <div id="links">
            <div className="link">
              <a href="https://cybr.es/@kjhoerr" rel="me">
                <FaMastodon size={20} style={{ marginBottom: "-4px" }} />{" "}
                @kjhoerr@cybr.es
              </a>
            </div>
            <div className="link">
              <a href="https://order.blackrockbrews.com">
                Black Rock Brewing (recent project)
              </a>
            </div>
            <div className="link">
              <a href="https://git.submelon.dev">
                My Gitea instance for pet projects
              </a>
            </div>
          </div>
        </div>

        <div id="meta">
          <span>
            &copy;2021 kjhoerr@https://submelon.dev/:
            {getTimestamp(parseInt(TIMESTAMP))}
          </span>
        </div>
      </StyledContainer>
    </main>
  );
};

export default IndexPage;