import React from 'react';
import { string, bool, node } from 'prop-types';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { COLOR_PRIMARY, media } from '@vincent_za/styles';

const linkStyles = `
  &:hover {
    color: ${COLOR_PRIMARY};
  }
`;

const linkOverlayStyles = `
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
`;

const CellLinkInternalStyled = styled(Link)`
  ${linkStyles}
`;

const CellLinkInternalMobileOverlay = styled(Link)`
  ${linkOverlayStyles};
  
  ${media.sm`
    display: none;
  `}
`;

const CellLinkStyled = styled.a`
  ${linkStyles}
`;

const CellLinkMobileOverlay = styled.a`
  ${linkOverlayStyles};
  
  ${media.sm`
    display: none;
  `}
`;

class CellLink extends React.PureComponent {
  render() {
    const { isResponsive, isInternal, children, href } = this.props;
    return (
      <div>
        {
          isInternal &&
          <div>
            <CellLinkInternalStyled to={href}>
              {children}
            </CellLinkInternalStyled>
            {
              isResponsive &&
              <CellLinkInternalMobileOverlay to={href} />
            }
          </div>
        }
        {
          !isInternal &&
          <div>
            <CellLinkStyled href={href} target="_blank">
              {children}
            </CellLinkStyled>
            {
              isResponsive &&
              <CellLinkMobileOverlay href={href} target="_blank" />
            }
          </div>
        }
      </div>
    );
  }
}

CellLink.propTypes = {
  isResponsive: bool,
  isInternal: bool,
  children: node.isRequired,
  href: string.isRequired,
};

CellLink.defaultProps = {
  isResponsive: false,
  isInternal: false,
};

export default CellLink;
