import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRssSquare, faCopy } from '@fortawesome/free-solid-svg-icons'
import Helmet from 'react-helmet'
import styled from 'styled-components';

import Layout from '../components/Layout/Layout.js';
import ExternalLink from '../components/ExternalLink';
import Emoji from '../components/Emoji';
import Alert from '../components/Alert';

const StyledButton = styled(ExternalLink)`
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  background: wheat;
  color: black;
`;
const StyledCopyButton = styled.span`
  cursor:pointer;
  padding: 0px 2px 2px 2px;
`;

const FeedsPage = () => {
  const feeds = [
    {
      name: 'Main Feed',
      url: '/rss.xml',
      description: '"Just give me everything". This is the default feed and includes all notes and articles.',
    },
    {
      name: 'Tech Feed',
      url: '/technology.xml',
      description: 'This feed includes all notes and articles about technology (this will include most content).',
    },
    {
      name: 'Non-Tech Feed',
      url: '/nontech.xml',
      description: 'This feed excludes all notes and articles about technology (only life updates, books, etc.).',
    },
    {
      name: 'Books Feed',
      url: '/books.xml',
      description: 'This feed includes all notes and articles only about books (reviews, etc.).',
    },
    {
      name: 'Life Feed',
      url: '/life.xml',
      description: 'This feed includes all notes and articles only about life updates.',
    },
  ];

  const copyFeedsUrl = () =>
    navigator && navigator.clipboard && navigator.clipboard.writeText &&
      navigator.clipboard.writeText('https://wilw.dev');
  
  return (
    <Layout>
      <Helmet title='Feeds'>
        <meta name="description" content="Subscribe to blog and article updates." />
      </Helmet>
      <h2>RSS Feeds</h2>
      <p>RSS lets you subscribe to receive new articles (blog posts, notes, etc.) as they are published.</p>
      <p>My site has a number of different RSS feeds you can subscribe to, so you can choose the one(s) you want and avoid the content you're not interested in.</p>

      <Alert colour='orange' title='Do you need an RSS reader?'>
        <p>There are lots of good ones. Just <ExternalLink href="https://duckduckgo.com/?q=rss+reader">search</ExternalLink> for one for your device.
         I use <ExternalLink href="https://www.reederapp.com/">Reeder 5</ExternalLink> on my <ExternalLink href="https://itunes.apple.com/app/id1529448980">Mac</ExternalLink> and <ExternalLink href="https://apps.apple.com/app/id1529445840">iPhone</ExternalLink>.</p>
      </Alert>

      <h3><Emoji e='🌍' n='Earth'/> Recommended: enter <code>wilw.dev <StyledCopyButton onClick={copyFeedsUrl}><FontAwesomeIcon icon={faCopy} /></StyledCopyButton></code> into your RSS reader &amp; it should list the available feeds</h3>
      <p>Alternatively you can choose a feed from the options below.</p>

      {feeds.map(feed => 
        <Alert key={feed.url} colour='green' title={<span><FontAwesomeIcon icon={faRssSquare} /> {feed.name}</span>}>
          <p>{feed.description}</p>
          <StyledButton href={feed.url}>Subscribe</StyledButton>
        </Alert>  
      )}
    </Layout>
  );
}

export default FeedsPage
