import React, { FC } from 'react'
import styled from 'styled-components'
import Icon from '@ant-design/icons'
import { Button } from '../Button'
import { Breakpoint } from '../Breakpoint'
import { ReactComponent as Cart } from '../../icons/cart.svg'
import { ReactComponent as Menu } from '../../icons/menu.svg'
import { ReactComponent as Logo } from '../../branding/logo.svg'

const StyledHeader = styled.header`
  display: flex;
  position: relative;
  padding: 55px 40px 52px;
  justify-content: flex-start;
  border-bottom: 3px solid ${props => props.theme.brandPrimary};

  ${props => props.theme.breakpoints.down('s')} {
	padding: 20px 25px;
	justify-content: center;
	border-bottom: 2px solid #000022;
  }
`
const StyledLogo = styled(Logo)`
  width: 171px;
  height: 41px;

  ${props => props.theme.breakpoints.down('s')} {
	width: 111px;
	height: 24px;
  }
`

const StyledText = styled.span`
  padding-left: 4px;
  display: inline-block;
  font-weight: 400;
  vertical-align: middle;
`

const StyledCartWrapper = styled.a`
  right: 45px;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  color: #000;
  font-size: 20px;
  line-height: 128%;


  &:hover, &:focus, &:visited {
	color: #000;
  }

  .anticon {
	font-size: 16px;
  }


  ${props => props.theme.breakpoints.down('s')} {
	right: 20px;

	.anticon {
	  font-size: 22px;
	}

	${StyledText} {
	  display: none;
	}
  }
`

const StyledButton = styled(Button)`
  position: absolute;
  right: 156px;
  top: 45px;
  width: 216px;
  height: 58px;

  ${props => props.theme.breakpoints.down(600)} {
	width: 130px;
  }
`

export interface HeaderProps {
	className?: string
	showMenu?: boolean
	onClickMenu?: () => void
	showActiveKit?: boolean;
	activeKitHref?: string
}

const StyledMenuIcon = styled(Icon)`
  font-size: 22px;
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
`

export const Header: FC<HeaderProps> = ({
																					showMenu,
																					onClickMenu,
																					showActiveKit,
																					activeKitHref,
																					className
																				}) => {
	return (
		<StyledHeader className={className}>
			{showMenu &&
				<Breakpoint s down>
					<StyledMenuIcon component={Menu} onClick={onClickMenu} />
				</Breakpoint>
			}
			<StyledLogo />
			{showActiveKit &&
				<Breakpoint s up>
					<StyledButton href={activeKitHref}>Activate Kit</StyledButton>
				</Breakpoint>}
			<StyledCartWrapper target="_blank" rel="noopener noreferrer"
				href="https://ihealthlabs.com/products/checkmesafe-home-collection-kit-C2">
				<Icon component={Cart} />
				<StyledText>SHOP</StyledText>
			</StyledCartWrapper>
		</StyledHeader>
	)
}
