import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLaptop } from '@fortawesome/free-solid-svg-icons';
import { faLinux, faApple, faAndroid, faGithub } from '@fortawesome/free-brands-svg-icons';
import Helmet from 'react-helmet';
import styled from 'styled-components';

import Layout from '../components/Layout/Layout.js';
import capsuleTownIcon from '../images/capsuletown.png';
import treadlIcon from '../images/treadl.png';
import dottyIcon from '../images/dotty.png';
import ssotoolsIcon from '../images/ssotools.png';

const projects = [
  {
    name: 'Capsule Town',
    logo: capsuleTownIcon,
    url: 'https://portal.mozz.us/gemini/capsule.town',
    description: 'A free Vercel-like service for hosting your own Geminispace. Find out more by visiting gemini://capsule.town in your Gemini client. The link above will show the Gemini capsule through a web proxy service.',
    availableFor: [ { name: 'macOS', icon: faApple }, { name: 'Linux', icon: faLinux } ],
  },
  {
    name: 'Treadl',
    logo: treadlIcon,
    url: 'https://treadl.com',
    description: 'A webapp for managing, displaying, and sharing weaving projects.',
    availableFor: [ { name: 'Web', icon: faLaptop }, { name: 'iOS', icon: faApple }, { name: 'Android', icon: faAndroid } ]
  },
  {
    name: 'Dotty',
    logo: dottyIcon,
    url: 'https://dotty.cloud',
    description: 'A command-line tool and RESTful API for backing-up and storing dotfiles and configuration files.',
    availableFor: [ { name: 'Web', icon: faLaptop }, { name: 'macOS', icon: faApple, url: 'https://dotty.cloud/documentation/quick-start' }, { name: 'Linux', icon: faLinux, url: 'https://dotty.cloud/documentation/quick-start' } ]
  },
  {
    name: 'SSO Tools',
    logo: ssotoolsIcon,
    url: 'https://sso.tools',
    description: 'A webapp for managing custom IdPs for testing and building out single sign-on and enterprise applications.',
    availableFor: [ { name: 'Web', icon: faLaptop } ]
  },
];

const otherProjects = [
  {
    name: 'Gower Tides',
    description: 'An Android app for displaying daily tidal patterns, along with weather and surf conditions, for the sea around the Gower Peninsula in South Wales. The app was aimed at surfers and other sea-users, and was available for several years on Google Play, but is now discontinued.',
    source: 'https://github.com/willwebberley/GowerTides'
  },
  {
    name: 'NZone Finder',
    description: 'An Android app for locating nearby public hotspots for Nintendo 3DS network services (e.g. StreetPass and SpotPass) on a convenient map. The project is now discontinued and is no longer available on Google Play.',
    source: 'https://github.com/willwebberley/NZone-finder'
  },
  {
    name: 'Patients, Please',
    description: 'Built as part of a team at the 2016 NHS Hackathon, this game is inspired by the indie game "Papers, Please", and is set in an emergency ward in a hospital. The game (Unity frontend and Python backend) was designed to highlight the stress and toll placed on clinicians working in such wards, with players needing to manage queuing, triage, bed space, progressive illnesses, and more. We won the Patient Involvement Award.',
  },
  {
    name: 'WekaGo',
    description: 'A Go wrapper for the Weka machine-learning toolkit - supporting a number of basic classification tasks. The source is still available and usable, but has not been maintained in some time.',
    source: 'https://github.com/willwebberley/WekaGo',
  },
  {
    name: 'WekaPy',
    description: 'Like WekaGo, except for Python instead of Go.',
    source: 'https://github.com/willwebberley/WekaPy',
  },
  {
    name: 'Health Explorer Wales',
    description: 'This project was undertaken as part of a team at the 2015 NHS Hackathon, and comprised a webapp that would attempt to automatically visualise available health and demographic data. For example, maps, timeseries, charts, etc. in order to make public data more accessible.'
  },
  {
    name: 'CasaStream',
    description: 'A project that supported simultaneous audio output (e.g. for music) across devices on a network. The project hooked into PulseAudio and made uss of RTP to broadcast sound to low-powered devices (such as a Raspberry Pi). Whilst I used to use this fairly frequently, the project is no longer being maintained.',
    source: 'https://github.com/willwebberley/CasaStream'
  }
];

const StyledProjects = styled.div`
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
`;
const StyledProject = styled.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(150,150,150,0.2);
`;
const StyledProjectImage = styled.div`
  padding-right: 30px;
  padding-top: 30px;
  img{
    width: 100px;
  }
`;
const StyledPlatform = styled.a`
  text-decoration: none;
  margin-right: 15px;
`;

const ProjectsPage = () => (
  <Layout>
    <Helmet title='Projects'>
      <meta name="description" content="Projects I'm working on now and in the past" />
    </Helmet>
    <h2>Projects</h2>
    <StyledProjects>
      <div>
        <p>Some of the things I am currently working on. Please <a href='https://twitter.com/willwebberley' target='_blank' rel='noopener noreferrer'>get in touch</a> if you are interested in finding out more about these (or if you'd like to help out or get involved!).</p>
        {projects.map((p, i) =>
          <StyledProject key={i}>
            <StyledProjectImage>
              <img alt={`${p.name} logo`} src={p.logo} />
            </StyledProjectImage>
            <div>
              <h3><a href={p.url} target='_blank' rel='noopener noreferrer'>{p.name}</a></h3>
              <p>{p.description}</p>
              <p>{p.availableFor && p.availableFor.map((a, j) => 
                <StyledPlatform key={j} href={a.url || p.url} target="_blank" rel="noopener noreferrer">{a.icon && <FontAwesomeIcon icon={a.icon} />} {a.name}</StyledPlatform>
              )}</p>
            </div>
          </StyledProject>
        )}
      </div>
      <div>
        <p>Some previous projects and open-sourced bits.</p>
        {otherProjects.map((p, i) => 
          <div key={i}>
            <h3>{p.name}</h3>
            <p>{p.description}</p>
              {p.source && <a href={p.source} target='_blank' rel='noopener noreferrer'><span><FontAwesomeIcon icon={faGithub} /> Project home</span></a>}
          </div>
        )}
      </div>
    </StyledProjects>
  </Layout>
);

export default ProjectsPage
