import { DOMAttributes } from 'react'

interface IArrowLinkProps extends DOMAttributes<{}> {
  link?: string
  target?: string
  type?: string
  reverse?: boolean
}


import * as React from 'react'
import { string } from 'prop-types'
import { Link } from 'react-router-dom'
import styled, { css } from 'styled-components'

import { EXTRA_TEXT } from '~/components/pru/ui-colors'
import { clearBtn } from '~/utils/mixins'
import { IArrowLinkProps } from './ArrowLink.d'

const arrowLinkCss = css`
  ${clearBtn} display: inline-block;
  font-family: 'Proba';
  font-size: 14px;
  line-height: 1.29;
  text-align: inherit;
  color: ${EXTRA_TEXT};
  border: 0;
  opacity: 0.7;
  transition: opacity 0.15s linear;

  ${(props: IArrowLinkProps) => (props.reverse ? `display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;` : ``)};

  .arrow-svg {
    display: inline-block;
    color: inherit;
    margin-left: 9px;
    transition: transform 0.15s linear;

    ${(props: IArrowLinkProps) => (props.reverse ? `transform: rotateY(180deg);margin-right: 6px;` : ``)};
  }

  &:hover,
  &:focus,
  &:active {
    opacity: 1;

    .arrow-svg {
      transform: ${(props: IArrowLinkProps) => (props.reverse ?
        `translateX(-3px) rotateY(180deg);` : `translateX(3px);`)};
    }
  }

  &:focus {
    outline: none;
  }
`

const NativeLink = styled.a`
  ${arrowLinkCss};
`

const ReactLink = styled(Link)`
  ${arrowLinkCss};
`

const Button = styled.button`
  ${arrowLinkCss};
`

export default class ArrowLink extends React.PureComponent<IArrowLinkProps> {
  static propTypes = {
    link: string,
    target: string
  }

  renderSvg() {
    return (
      <svg
        className="arrow-svg"
        width="9"
        height="9"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g
          stroke="currentColor"
          strokeWidth=".875"
          fill="none"
          fillRule="evenodd"
        >
          <path d="M4.95 8.55l3.6-4.05L4.95.45M0 4.5h8.1" />
        </g>
      </svg>
    )
  }

  render() {
    const { link, target, type = 'submit', children, ...props } = this.props

    if (link && target === '_blank') {
      return (
        <NativeLink href={link} target="_blank" {...props}>
          {children}
          {this.renderSvg()}
        </NativeLink>
      )
    } else if (link) {
      return (
        <ReactLink to={link} {...props}>
          {children}
          {this.renderSvg()}
        </ReactLink>
      )
    } else {
      return (
        <Button type={type} {...props}>
          {children}
          {this.renderSvg()}
        </Button>
      )
    }
  }
}