import * as React from "react"
import styled, { css, injectGlobal } from "styled-components"
import * as ui from "../../.."
import withLink from "../withLink"
// tslint:disable-next-line:no-unused-expression
injectGlobal`
  @keyframes menuIn {
    from {
      opacity: 0;
      transform: translate(-13px, 0);
    }


    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  .menuIn {
    animation-name: menuIn;
    animation-duration: 0.343s;
    animation-fill-mode: both;
  }
`
const MenuItemContainer = styled.div`
  margin-bottom: 5px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  padding: 8px 0 8px 20px;
  a {
    text-decoration: none;
  }
  cursor: pointer;
  &:hover {
    opacity: 0.6;
    background: ${(props) => props.theme.matteWhite};
  }
`
const MenuActiveStyle = css`
  padding-left: 15px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: ${(props) => props.theme.pumpkin};
  color: ${(props) => props.theme.pumpkin};
`
const delayStyle = css`
  animation-delay: ${(props: any) => props.delay || 0.222}s;
`
const MenuItemContainerWithActive = styled(MenuItemContainer) `
  opacity:0;
  ${(props: any) => props.active ? MenuActiveStyle : ""}
  ${delayStyle}
` as any
const IconActive = css`
  &:after {
    color: ${(props) => props.theme.pumpkin};
  }
`
const Icon = styled(ui.Icon) `
  margin-right: 10px;
  ${(props: any) => props.active ? IconActive : ""}
`
const Title = styled.div`
  color: ${(props: any) => !props.active ? props.theme.matteBlack : props.theme.pumpkin};
  font-weight: ${(props: any) => props.active ? "800" : "600"};
` as any

// tslint:disable-next-line:max-line-length
export default withLink(({ active, iconName, style, title, Link, href, className, delay }: { delay?: any, className?: any, active: boolean, iconName: any, style?: any, title: string, href: string, Link: any }) => {
  return (
    <Link style={{ textDecoration: "none" }} href={href}>
      <MenuItemContainerWithActive style={style} active={active} delay={delay || 0.222} className={`heavent ${className}`}>
        {typeof iconName === "string"
          ? <Icon style={{ color: "#bcbcba", size: "1rem" }} name={iconName} active={active} />
          : iconName
        }
        <Title active={active}>{title}</Title>
      </MenuItemContainerWithActive>
    </Link>
  )
})