// @flow
import React, { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import { UnstyledButton } from '../../../behaviors';
import { Ellipsis } from '../../../icon/ellipsis/index';
import type { TriggerButtonProps } from '../context-menu.proptypes';
import { getPaletteColor } from '../../../../mixins/branding';

import {
  FOCUS_VISIBLE_SELECTOR,
  hoverBackgroundColor,
  getBaseFocusState,
  activeBackgroundColor,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
} from '../../../../mixins/focus';

const EllipsisButtonWrapper = styled(UnstyledButton)`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: ${getPaletteColor('white')};

  ${getBaseFocusState({})}
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }
  &:hover {
    background: ${hoverBackgroundColor};
  }
  &:active {
    background: ${activeBackgroundColor};
  }
`;

export const EllipsisButton: StatelessFunctionalComponent<TriggerButtonProps> = ({
  onClick,
  ...restProps
}: TriggerButtonProps) => (
  <EllipsisButtonWrapper
    aria-haspopup
    insetFocus
    onClick={onClick}
    {...restProps}
  >
    <Ellipsis aria-hidden colorName="white" />
  </EllipsisButtonWrapper>
);
