import React, { FC, PropsWithChildren } from 'react'
import styled from 'styled-components'
import { Breakpoint } from '../Breakpoint'
import { ButtonText } from '../Typography'

const CompanyLink = {
	title: 'iHealth Labs Inc',
	href: 'https://ihealthlabs.com/'
}

const FooterLinks = [{
	title: 'FAQs',
	href: 'https://ihealthlabs.com/products/checkmesafe-home-collection-kit-C2-detail',
}, {
	title: 'Contact Us',
	href: 'mailto:support@ihealthlabs.com'
}, {
	title: 'Terms of Use',
	href: 'https://www.iHealthCheckMeSafe.com/TermsOfUse'
}, {
	title: 'Privacy Policy',
	href: 'https://www.iHealthCheckMSafe.com/PrivacyPolicy'
}]

const Links = styled.div`
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
`
const LinkItem = styled.div`
  padding: 0 10px;
  display: inline-block;
  position: relative;

  &:after {
	content: '';
	position: absolute;
	right: 0;
	top: 1px;
	height: 14px;
	border-left: 1px solid #000;
  }

  > a {
	color: ${props => props.theme.brandPrimary};
	text-decoration: none;
  }

  &:last-child:after {
	display: none;
  }
`
const CopyRight = styled(ButtonText)`
  padding-left: 3px;
  line-height: 16px;

  > a {
	color: inherit;
	text-decoration: underline;

	&:hover, &:focus, &:visited {
	  color: inherit;
	}
  }
`

const LargeFooter = styled.footer`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 47px 28px 41px;
`
const TinyFooter = styled.footer`
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 12px 0 10px 0;
  position: relative;

  &:before {
	content: '';
	width: 73px;
	height: 2px;
	border-radius: 2px;
	background: ${props => props.theme.brandPrimary};
	position: absolute;
	top: 3px;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
  }

  ${Links} {
	font-size: 12px;
	margin-bottom: 12px;
  }

  ${LinkItem} {
	color: #5B5B5B;
	padding: 0 8px;

	&:after {
	  top: -2px;
	  height: 20px;
	  border-color: #8F9296;
	  transform: scale(0.5);
	}

	> a {
	  color: inherit;
	}
  }

  ${CopyRight} {
	line-height: 1;
	padding-left: 0;
	color: #5B5B5B;
  }
`
const StyledFooter: FC<PropsWithChildren> = ({ children }) => {
	return (
		<>
			<Breakpoint width={{ max: 520 }}>
				<TinyFooter>
					{children}
				</TinyFooter>
			</Breakpoint>
			<Breakpoint width={{ min: 520 }}>
				<LargeFooter>
					{children}
				</LargeFooter>
			</Breakpoint>
		</>
	)

}
export const Footer: FC<{ className?: string }> = (props) => {
	return (
		<StyledFooter {...props}>
			<Links>
				{
					FooterLinks.map((link, index) => (
						<LinkItem key={index}>
							<a target="_blank" rel="noopener noreferrer" href={link.href}>{link.title}</a>
						</LinkItem>
					))
				}
			</Links>
			<CopyRight level={2}>
				© {new Date().getFullYear()}, <a target="_blank" rel="noopener noreferrer"
				href={CompanyLink.href}>{CompanyLink.title}</a> All rights
				reserved.
			</CopyRight>
		</StyledFooter>
	)
}
