import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components';
import Emoji from './Emoji';
import useStore from '../store';
import { themes } from '../components/Layout/Layout'

import Will from '../images/will.jpeg';

const StyledHeader = styled.header`
  text-align: left;
  margin: 0 auto 1.45rem auto;
  max-width: 960px;
`;
const StyledHeaderArea = styled.div`
  display: flex;
  justify-content: start;
  align-items: center;
  color: rgb(200,200,200);
  padding: 1.45rem 1.1rem;
`;
const StyledAvatar = styled.div`
  height: 70px;
  width: 70px;
  margin-right: 10px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  background-image: url(${Will});
`;
const StyledTitle = styled.h1`
  a {
    text-decoration: none;
  }
  margin-bottom: 6px;
  font-size: 1.3rem;
  font-variation-settings: "MONO" 0.5, "CASL" 0.5, "wght" 400, "slnt" -7, "CRSV" 1; 
`;
const StyledSocialLink = styled.a`
  text-decoration: none;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 4px;
  border-radius: 5px;
  background: linen;
  display: inline-block;
`;
const StyledNavBar = styled.div`
  padding: 10px;
  color: linen;
  a {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
    font-size: 20px;
  }
`;
const StyledThemeSelector = styled.select`
  padding: 4px;
  background: white;
  border: 1px solid gray;
  border-radius: 5px;
  cursor: pointer;
`;

const Header = () => {
  const store = useStore();

  const switchTheme = themeName => {
    store.setTheme(themeName);
    localStorage.setItem('theme', themeName);
  };

  return (
    <StyledHeader>
      <StyledHeaderArea>
        <Link to='/'><StyledAvatar /></Link>
        <div>
          <StyledTitle><Link to='/'>Will Webberley</Link></StyledTitle>
          <StyledSocialLink rel="me" href="https://fosstodon.org/@wilw"><Emoji e='📣' n='Loudspeaker emoji' /> mastodon</StyledSocialLink>
          <StyledSocialLink href="https://pixelfed.social/@wilw" target="_blank" rel="noopener noreferrer"><Emoji e='🖼️' n='Painting emoji'/> pixelfed</StyledSocialLink>
          <StyledSocialLink href="https://git.wilw.dev/explore/repos" target="_blank" rel="noopener noreferrer"><Emoji e='💻' n='Laptop emoji'/> code</StyledSocialLink>
        </div>
      </StyledHeaderArea>
      <StyledNavBar>
        <Link to='/' activeClassName='active-link'>about</Link>
        <Link to='/blog' activeClassName='active-link'>blog</Link>
        <Link to='/notes' activeClassName='active-link'>notes</Link>
        <Link to='/projects' activeClassName='active-link'>projects</Link>
        <Link to='/research' activeClassName='active-link'>research</Link>
        <StyledThemeSelector value={store.theme} onChange={e => switchTheme(e.target.value)}>
          {Object.keys(themes).map(themeName =>
            <option key={themeName} value={themeName}>{themes[themeName].name}</option>
          )}
        </StyledThemeSelector>
      </StyledNavBar>
    </StyledHeader>
  );
}

export default Header
