// @flow
import React from 'react';
import styled from 'styled-components';
import type { NextButtonProps } from './next-button.proptypes';
import { Span } from '../../typography';
import { Box } from '../../../primitives';
import { NextIcon } from '../../icon';
import { getFontFamily } from '../../../mixins/typography';
import { getPaletteColor } from '../../../mixins/branding';
import {
  FOCUS_VISIBLE_SELECTOR,
  transitionInstant,
  transitionFade,
  getBaseFocusState,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
} from '../../../mixins/focus';
import { getSpacingRules } from '../../../mixins/spacing';

// Needs to be a button for accessibility, form-next semantic reasons.
const StyledButton = styled.button`
  background: none;
  border: none;
  display: flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  ${getBaseFocusState({ activeTransition: false })}
  svg > g > g {
    transition: ${transitionFade};
  }
  ${FOCUS_VISIBLE_SELECTOR} {
    svg {
      box-shadow: ${focusedBorderShadow({ inset: false })} ${focusedBorderColor},
        ${focusedBoxShadow};
      border-radius: 50%;
    }
  }
  &[disabled] {
    cursor: default;
  }
  &:not([disabled]):hover {
    svg > g > g {
      fill: ${getPaletteColor('brand-primary-base-hover')};
      transition: ${transitionInstant};
    }
  }
  &:not([disabled]):active {
    svg > g > g {
      fill: ${getPaletteColor('brand-primary-base')};
      transition: ${transitionInstant};
    }
  }
`;

const StyledContainer = styled(Box)`
  padding: 6px;
  ${getSpacingRules}
`;

const OffsetSpan = styled(Span)`
  font-family: ${getFontFamily};
  padding-right: 22px;
  /* For Safari 10.1 and older */
  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix  */
  display: -webkit-inline-box;
  -webkit-box-align: center;
  /* stylelint-enable */
`;

export const NextButton = ({
  children,
  disabled,
  spacing,
  className,
  'data-cy': dataCy,
  'data-qa': dataQa,
  id,
  ...props
}: NextButtonProps) => (
  <StyledContainer
    spacing={spacing}
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
    {...props}
  >
    <StyledButton type="submit" disabled={disabled}>
      {children != null ? (
        <OffsetSpan fontSize="f2" bold colorName="greyscale-dark">
          {children}
        </OffsetSpan>
      ) : null}
      <NextIcon disabled={disabled} />
    </StyledButton>
  </StyledContainer>
);

NextButton.displayName = 'NextButton';
