import styled from 'styled-components';

import { Colors, Sizes } from '../index';

const Hiperlink = styled.a<{isType?: string; isActiveRoute?: boolean; }>`
  font-family: "sentico-sans-medium";
	-webkit-font-smoothing: antialiased;
	transition: all 0.15s ease-in-out;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  will-change: transform;

  & svg {
    position: relative;
    top: 3px;
    height: 16px;
    fill:none;
    stroke: ${Colors.mongeral};
    stroke-miterlimit: 10;
    stroke-width: 2px;
    margin-left: 6px;
  }

  ${({ isType }) => (isType === 'forward' || isType === 'backward') && `
    &:hover {
      .switch-arrow-elements {
        transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
      }

      .switch-arrow-elements.one {
        stroke: ${Colors.line};
        transform: translateX(-1px);
      }

      .switch-arrow-elements.two {
        stroke: ${Colors.regalBlue};
        transform: translateX(5px);
      }
    }
  `}

  ${({ isType }) => isType === 'arrow-plus' && `
    .link-arrow-elements {
      fill: none;
      transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
    }

    &:hover .link-arrow-elements {
      stroke: ${Colors.regalBlue};
      transform: translateX(5px);
    }
  `}

  ${({ isType }) => isType === 'download' && `
    .link-arrow-elements {
      fill: none;
      transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
    }

    &:hover .link-arrow-elements {
      stroke: ${Colors.regalBlue};
      transform: translateX(3px);
    }
  `}

  ${({ isType }) => isType === 'plus' && `
    .plus { transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out; }
    &:hover .plus { stroke: ${Colors.regalBlue}; }
    &:hover  .plus.up { transform: translate(0, -4px); }
    &:hover  .plus.right { transform: translate(4px, 0); }
    &:hover  .plus.down { transform: translate(0, 4px); }
    &:hover  .plus.left { transform: translate(-4px, 0); }
  `}

  ${({ className }) => className !== 'navItem' && `
    color: ${Colors.mongeral};
    text-transform: uppercase;
    &:hover { color: ${Colors.regalBlue}; }
  ` }

  ${({ className }) => className === 'navItem' && `
      color: ${Colors.support};
      display: block;
      margin-bottom: ${Sizes.s4}px;
      text-transform: capitalize;
      font-family: inherit;

      &:hover {
        color: ${Colors.line};
      }
  ` }

  ${({ isActiveRoute }) => isActiveRoute && `
    position: relative;
    font-family: 'sentico-sans-medium';
    &:before {
      content: '';
      position: absolute;
      height: 25px;
      width: 3px;
      left: -${Sizes.s5}px;
      top: -4px;
      background-color: ${Colors.mongeral};
    }
  ` }
`;

export default Hiperlink;