// @flow
import React from 'react';
import styled from 'styled-components';
import type { BackButtonProps } from './back-button.proptypes';
import { ArrowBack } from '../../icon';
import {
  FOCUS_VISIBLE_SELECTOR,
  focusedCircleRadius,
  hoverBackgroundColor,
  getBaseFocusState,
  activeBackgroundColor,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
} from '../../../mixins/focus';
import { getSpacingRules } from '../../../mixins/spacing';

const StyledButton = styled.button`
  background: none;
  border: none;
  box-sizing: border-box;
  padding: 8px;
  margin: 0;
  border-radius: ${focusedCircleRadius};
  ${getBaseFocusState({})}
  &:not([disabled]) {
    &:hover {
      background-color: ${hoverBackgroundColor};
    }
    &:active {
      background-color: ${activeBackgroundColor};
    }
  }
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }
  ${getSpacingRules}
`;

export const BackButton = ({
  disabled,
  ariaLabel,
  onClick,
  spacing,
  className,
  'data-cy': dataCy,
  'data-qa': dataQa,
  id,
}: BackButtonProps) => (
  <StyledButton
    type="button"
    aria-label={ariaLabel}
    onClick={onClick}
    disabled={disabled}
    spacing={spacing}
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
  >
    <ArrowBack disabled={disabled} />
  </StyledButton>
);

BackButton.displayName = 'BackButton';
