import React, { FC } from 'react'
import { Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStream, faPaperPlane, faSun, faMoon } from '@fortawesome/free-solid-svg-icons'
import { useTheme } from '../hooks'
import { setColorScheme } from '../actions/theme'
import { getColorScheme } from '../selectors/theme'
import { ColorScheme } from '../types'

const NavigationMenu: FC = () => {
    const theme = useTheme()
    const scheme = useSelector(getColorScheme)
    const dispatch = useDispatch()

    const switchColorSchemeItem = () => {
        switch (scheme) {
            case ColorScheme.Light:
                return (
                    <a style={{ color: theme.primary, cursor: 'pointer' }} onClick={() => dispatch(setColorScheme(ColorScheme.Dark))}>
                        <span className="icon" style={{ color: theme.primary }}>
                            <FontAwesomeIcon icon={faMoon} />
                        </span>
                        &nbsp;
                        <span>Dark Mode</span>
                    </a>
                )
            case ColorScheme.Dark:
                return (
                    <a style={{ color: theme.primary, cursor: 'pointer' }} onClick={() => dispatch(setColorScheme(ColorScheme.Light))}>
                        <span className="icon" style={{ color: theme.primary }}>
                            <FontAwesomeIcon icon={faSun} />
                        </span>
                        &nbsp;
                        <span>Light Mode</span>
                    </a>
                )
        }
    }

    return (
        <nav>
            <div>
                <span className="icon" style={{ color: theme.primary }}>
                    <FontAwesomeIcon icon={faStream} />
                </span>
                &nbsp;
                <Link style={{ color: theme.primary }} to="/">Timeline</Link>
            </div>

            <div>
                <span className="icon" style={{ color: theme.primary }}>
                    <FontAwesomeIcon icon={faPaperPlane} />
                </span>
                &nbsp;
                <Link style={{ color: theme.primary }} to="/apps">Apps</Link>
            </div>

            <div>
                {switchColorSchemeItem()}
            </div>
        </nav>
    )
}

export default NavigationMenu