import styled, { css } from 'styled-components';
import { Link } from 'react-router-dom';

interface StyledProps {
  themeDisabled: boolean;
  themeIntent:
    | 'primary'
    | 'danger'
    | 'success'
    | 'warning'
    | 'error'
    | 'subdued-text';
  themeSize: 'small' | 'medium' | 'large' | 'inherit';
}

const styles = css<StyledProps>`
  white-space: nowrap;
  text-decoration: none;
  font-weight: ${({ theme }) => theme.fontWeights.button.text};
  margin: 0;
  padding: 0;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          font-size: ${theme.fontSizes.button.small};
          line-height: ${theme.lineHeights.button.small};
        `;
      case 'medium':
        return css`
          font-size: ${theme.fontSizes.button.medium};
          line-height: ${theme.lineHeights.button.medium};
        `;
      case 'large':
        return css`
          font-size: ${theme.fontSizes.button.large};
          line-height: ${theme.lineHeights.button.large};
        `;
      case 'inherit':
        return css`
          font-size: inherit;
          line-height: inherit;
        `;
    }
  }};

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'primary':
        return css`
          color: ${theme.colors.button.primary};
          &:hover,
          &:focus {
            color: ${theme.colors.button.hoverPrimary};
          }
        `;
      case 'success':
        return css`
          color: ${theme.colors.button.success};
          &:hover,
          &:focus {
            color: ${theme.colors.button.hoverSuccess};
          }
        `;
      case 'warning':
        return css`
          color: ${theme.colors.button.warning};
          &:hover,
          &:focus {
            color: ${theme.colors.button.hoverWarning};
          }
        `;
      case 'danger':
        return css`
          color: ${theme.colors.button.danger};
          &:hover,
          &:focus {
            color: ${theme.colors.button.hoverDanger};
          }
        `;
      case 'error':
        return css`
          color: ${theme.colors.button.error};
          &:hover,
          &:focus {
            color: ${theme.colors.button.hoverError};
          }
        `;
      case 'subdued-text':
        return css`
          color: ${theme.colors.button.linkSubdued};
        `;
    }
  }};

  ${({ themeDisabled, theme }) => {
    switch (themeDisabled) {
      case true:
        return css`
          color: ${theme.colors.button.disabledText};
          pointer-events: none;
        `;
      case false:
        return css`
          &:hover,
          &:focus {
            text-decoration: underline;
          }
        `;
    }
  }};
`;

const StyledLink = styled.a<StyledProps>`
  ${styles};
`;

const StyledRouterLink = styled(Link)<StyledProps>`
  ${styles};
`;

const StyledIconWrapper = styled.span<{ themePosition: 'left' | 'right' }>`
  margin: 0;
  padding: 0;
  * {
    vertical-align: middle;
  }

  ${({ themePosition, theme }) => {
    switch (themePosition) {
      case 'left':
        return css`
          padding-right: ${theme.space.button.iconPadding};
        `;
      case 'right':
        return css`
          padding-left: ${theme.space.button.iconPadding};
        `;
    }
  }};
`;

export { StyledLink, StyledRouterLink, StyledIconWrapper };