import styled from "styled-components";
import { useTheme } from "../style/themes";
import { calculateAge } from "../utils/math";

import CardStack, { Item } from "../components/card-stack";
import Button from "../components/button";

const asCardStack = (items: Array<Item | string>) => (
    <CardStack
        items={items.map(item =>
            typeof item === "string"
                ? { content: item }
                : item
        )}
    />
);

const About: React.FC = () => {
    const { years, months, days } = calculateAge(new Date(2007, 6, 25));
    const { theme, toggleTheme } = useTheme();

    return <AboutSection>
        <h1>Hello.</h1>
        <p>My name is Franek. I'm {years} years, {months} months and {days} days old.</p>
        <div id="margin-auto">
            <Button 
                onClick={toggleTheme}
                content={`switch theme to ${theme.type === 'light' ? 'dark' : 'light'}`}
                icon={'/icons/' + (theme.type === 'light' ? 'moon' : 'sun') + '.svg'}
            />
        </div>
        
        <h2>Some facts about me</h2>
        {asCardStack([
            "introvert",
            "IT enthusiast",
            "automotive enthustiast"
        ])}

        <h2>I can...</h2>
        {asCardStack([
            "play keyboard/organ",
            "mess with PCs from software to hardware",
            "code various apps and scripts"
        ])}

        <h2>My favourite music genres are:</h2>
        {asCardStack([
            "black metal",
            "doom metal",
            "DSBM",
            "nu metal",
            "hard rock"
        ])}

        <h2>I like these bands/singers:</h2>
        {asCardStack([
            "Mgła",
            "Behemoth",
            "Burzum",
            "Arkona",
            "Draconian",
            "Darkthrone",
            "Venom",
            "Slipknot",
            "None",
            "Lil Peep",
            "Alphaville",
            "MGMT",
            "ABBA",
            "Evanescence"
        ])}
        <p>yeah I know, I listen to a broad spectrum of music</p>

        <h2>Some links...</h2>
        {asCardStack(LINKS)}
    </AboutSection>;
}

const AboutSection = styled.div`
    color: ${({ theme }) => theme.text};

    &>h1 {
        font-family: "Pacifico", serif;
    }

    &>#margin-auto {
        margin: 0 auto;
        width: max-content;
    }
`;

const LINKS = [
    {
        content: "PGP",
        icon: "/icons/pgp.svg",
        link: "/pgp.asc"
    },
    {
        content: "E-mail",
        icon: "/icons/email.svg",
        link: "mailto:contact@sador.me?subject=[sador.me] ..."
    },
    {
        content: "Gitea",
        icon: "/icons/gitea.svg",
        link: "https://git.sador.me"
    },
    {
        content: "Matrix",
        icon: "/icons/matrix.svg",
        link: "https://matrix.to/#/@boss:sador.me"
    },
    {
        content: "Instagram",
        icon: "/icons/instagram.svg",
        link: "https://instagram.com/sadorowo"
    }
];

export default About;