// @flow
import React, { type ComponentType, forwardRef } from 'react';
import styled, { css } from 'styled-components';
import type { TertiaryButtonProps } from './tertiary-button.proptypes';
import { getPaletteColor } from '../../../mixins/branding';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackeeRules } from '../../../mixins/stackee';
import {
  getFontFamily,
  getFontWeight,
  getFontSize,
} from '../../../mixins/typography';
import {
  getBorderRadius,
  getBorderColor,
  getBorderColorHover,
  getBorderColorActive,
} from './tertiary-button.css-rules';
import {
  FOCUS_VISIBLE_SELECTOR,
  getBaseFocusState,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
} from '../../../mixins/focus';
import { getThemeSpecificStyles } from '../../../mixins/themes';

const tradeSpecificStyles = css`
  && {
    color: ${getPaletteColor('brand-primary-fg')};
    border-width: 0;
    background-color: ${getPaletteColor('brand-primary-bg')};
  }
`;

const getCommonStyles = css`
  && {
    display: inline-block;
    min-width: 80px;
    height: 32px;
    border-width: 1px;
    border-style: solid;
    border-radius: ${getBorderRadius};
    background-color: ${getPaletteColor('white')};
    border-color: ${getBorderColor};
    color: ${getPaletteColor('greyscale-dark')};
    text-decoration: none;
    font-size: ${getFontSize};
    font-family: ${getFontFamily};
    font-weight: ${getFontWeight};
    padding: 0 15px;
    ${getBaseFocusState({})}
  }
  ${FOCUS_VISIBLE_SELECTOR} {
    border-color: transparent;
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }
  &:hover {
    border-color: ${getBorderColorHover};
  }
  &:active {
    color: ${getPaletteColor('greyscale-black')};
    border-color: ${getBorderColorActive};
  }
  &[disabled] {
    color: ${getPaletteColor('greyscale-medium')};
    border-color: ${getPaletteColor('greyscale-light')};
  }

  ${getThemeSpecificStyles({
    trade: tradeSpecificStyles,
    crypto: tradeSpecificStyles,
  })}
`;

const ActualButton: ComponentType<TertiaryButtonProps> = styled.button.attrs(
  () => ({
    type: 'button',
    bold: 'true',
    fontSize: 'f0',
  }),
)`
  ${getCommonStyles}
  line-height: 100%;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules};
`;

const LinkButton: ComponentType<TertiaryButtonProps> = styled.a.attrs(() => ({
  bold: 'true',
  fontSize: 'f0',
}))`
  ${getCommonStyles}
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules};
`;

export const TertiaryButton: ComponentType<TertiaryButtonProps> = forwardRef(
  ({ href, target, onClick, disabled, ...props }: TertiaryButtonProps, ref) =>
    href == null ? (
      <ActualButton
        onClick={onClick}
        disabled={disabled}
        {...props}
        ref={ref}
      />
    ) : (
      <LinkButton
        href={!disabled ? href : null}
        disabled={disabled}
        target={target}
        ref={ref}
        {...props}
      />
    ),
);

TertiaryButton.displayName = 'TertiaryButton';
