import React from 'react'
import { connect } from 'react-redux'
import injectSheet from 'react-jss'
import { Link, withRouter } from 'react-router-dom'

import Spacer from '../../components/spacer'
import LogoBetaWhite from '../../components/icons/icon-components/logo-beta-white'
import ExitWhite from '../../components/icons/icon-components/exit-white'
import FacebookWhite from '../../components/icons/icon-components/facebook-white'
import TwitterWhite from '../../components/icons/icon-components/twitter-white'
import InstagramWhite from '../../components/icons/icon-components/instagram-white'

const MenuWithStyle = ({ classes, history }) => (
	<div className={classes.menu}>
		<div className={classes.logoAndExit}>
			<LogoBetaWhite height={25} width={160} />
			<button className={classes.exitButton} onClick={() => history.goBack()}>
				<ExitWhite height={16} width={16} />
			</button>
		</div>

		<div className={classes.links}>
			<Link to="/about" className={classes.navigationLinkPhone}>
				About
			</Link>
			<Spacer height="32px" />
			<Link to="/feedback" className={classes.navigationLinkPhone}>
				Feedback
			</Link>
		</div>

		<div className={classes.socialMedia}>
			<FacebookWhite height={41} width={41} />
			<Spacer width="14px" />
			<TwitterWhite height={41} width={41} />
			<Spacer width="14px" />
			<InstagramWhite height={41} width={41} />
		</div>
	</div>
)

const styles = {
	menu: {
		position: 'fixed',
		width: '100%',
		height: '100%',
		'background-color': '#3D65F9',
	},
	logoAndExit: {
		display: 'flex',
		'justify-content': 'space-between',
		'border-bottom': '1px solid #FFFFFF',
		padding: '20px 25px 20px 20px',
	},
	exitButton: {
		cursor: 'pointer',
		'background-color': '#3D65F9',
		border: 'none',
	},
	links: {
		display: 'flex',
		'flex-direction': 'column',
		padding: '45px 0px 0px 24px',
	},
	navigationLinkPhone: {
		'font-family': 'hah-regular',
		'font-size': '24px',
		color: '#FFFFFF',
		'text-decoration': 'none',
		cursor: 'pointer',
	},
	socialMedia: {
		display: 'flex',
		padding: '48px 0px 0px 23px',
	},
}

const Menu = injectSheet(styles)(MenuWithStyle)
export default connect()(withRouter(Menu))

@@ -595,16 +595,213 @@
 white'%0A%0A
+const HAH_FACEBOOK_URL = 'https://www.facebook.com/HelpAssistHer/'%0Aconst HAH_TWITTER_URL = 'https://twitter.com/helpassisther'%0Aconst HAH_INSTAGRAM_URL = 'https://www.instagram.com/helpassisther/'%0A%0A
 const Me
@@ -1383,16 +1383,90 @@
 Media%7D%3E%0A
+%09%09%09%3Ca href=%7BHAH_FACEBOOK_URL%7D target=%22_blank%22 rel=%22noopener noreferrer%22%3E%0A%09
 %09%09%09%3CFace
@@ -1493,32 +1493,40 @@
 %7D width=%7B41%7D /%3E%0A
+%09%09%09%3C/a%3E%0A
 %09%09%09%3CSpacer width
@@ -1532,24 +1532,98 @@
 h=%2214px%22 /%3E%0A
+%0A%09%09%09%3Ca href=%7BHAH_TWITTER_URL%7D target=%22_blank%22 rel=%22noopener noreferrer%22%3E%0A%09
 %09%09%09%3CTwitterW
@@ -1649,24 +1649,32 @@
 dth=%7B41%7D /%3E%0A
+%09%09%09%3C/a%3E%0A
 %09%09%09%3CSpacer w
@@ -1684,24 +1684,100 @@
 h=%2214px%22 /%3E%0A
+%0A%09%09%09%3Ca href=%7BHAH_INSTAGRAM_URL%7D target=%22_blank%22 rel=%22noopener noreferrer%22%3E%0A%09
 %09%09%09%3CInstagra
@@ -1809,16 +1809,24 @@
 %7B41%7D /%3E%0A
+%09%09%09%3C/a%3E%0A
 %09%09%3C/div%3E

Add social media links