import React, { FC, useState } from 'react'
import { Breakpoint } from '../Breakpoint'
import {
	StyledActivateButton, StyledBackground, StyledCloseIcon, StyledCopyright, StyledExtraContent,
	StyledIcon,
	StyledMenuContainer,
	StyledMenuItem, StyledNextIcon,
	StyledPlainMenuContainer, StyledPlainMenuItem
} from './styled'
import { Paths } from 'routes/Paths'
import { menuConfig } from 'routes/menuConfig'
import { Text } from '../Typography'
import { ReactComponent as CloseSvg } from 'icons/close.svg'
import { ReactComponent as CaretRightSvg } from 'icons/caretRight.svg'

export interface MenuProps {
	onClose: () => void
	onLogout: () => void
}

export const Menu: FC<MenuProps> = ({ onLogout, onClose }) => {
	const [copyright] = useState(`Copyright iHealth ${new Date().getFullYear()}. All Rights Rerved.`)
	return (
		<>
			<Breakpoint s down>
				<StyledBackground>
					<StyledMenuContainer>
						<StyledCloseIcon component={CloseSvg} onClick={onClose} />
						<StyledActivateButton block href={Paths.Activate}>Activate Kit</StyledActivateButton>
						{menuConfig.map((item) => (
							<StyledMenuItem key={item.title} to={item.href} target={item.target}
								rel={item.target === '_blank' ? "noopener noreferrer" : undefined}>
								<StyledIcon component={item.icon} />
								{item.title}
							</StyledMenuItem>
						))}
						<StyledExtraContent>
							<StyledCopyright>{copyright}</StyledCopyright>
							<Text primary style={{ lineHeight: 1 }} onClick={onLogout}>Log out</Text>
						</StyledExtraContent>
					</StyledMenuContainer>
				</StyledBackground>
			</Breakpoint>
			<Breakpoint s up>
				<StyledPlainMenuContainer>
					{menuConfig.map((item) => (
						<StyledPlainMenuItem key={item.title} to={item.href} target={item.target}
							rel={item.target === '_blank' ? "noopener noreferrer" : undefined}>
							<StyledIcon component={item.icon} />
							{item.title}
							<StyledNextIcon component={CaretRightSvg} />
						</StyledPlainMenuItem>
					))}
					<StyledExtraContent>
						<StyledCopyright>{copyright}</StyledCopyright>
						<Text primary style={{ lineHeight: 1 }} onClick={onLogout}>Log out</Text>
					</StyledExtraContent>
				</StyledPlainMenuContainer>
			</Breakpoint>
		</>
	)
}
