import * as React from "react"
import { injectGlobal } from "styled-components"

// tslint:disable-next-line:no-unused-expression
injectGlobal`
  .AnchorWithAnimate {
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
  }
  @keyframes fadeZoomIn {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 0;
    }
  }
  .fadeZoomIn {
    transition: 0.3333s ease-out transform, 0.4444s ease-out opacity;
    animation: fadeZoomIn 0.4444s 1;
    white-space: nowrap;
    z-index:1;
  }
`

interface AWithDelayPropTypes extends React.AnchorHTMLAttributes<any> {
  href: string
}

export default class AWithZoomDelay extends React.Component<AWithDelayPropTypes, { active: boolean }> {

  constructor(props) {
    super(props)
    this.state = {
      active: false
    }
  }

  public handleClick = (e: React.MouseEvent<any>) => {
    if (!this.props.onClick) {
      return
    }
    this.props.onClick(e)
    this.setState({
      active: true
    })
    e.preventDefault()
    setTimeout(() => {
      window.location.href = this.props.href
    }, 444)
  }

  public render() {
    return (
      <a style={{ position: "relative", display: "inherit" }} {...this.props} onClick={this.handleClick} >
        {this.props.children}
        {this.state.active ? <div className={`AnchorWithAnimate ${this.state.active ? "fadeZoomIn" : ""}`}>
          {this.props.children}
        </div> : null}
      </a>
    )
  }
}