// @flow
import type { ComponentType } from 'react';
import styled, { keyframes } from 'styled-components';
import { getSelectionIndicatorShape } from './components.css-rules';
import { getPaletteColor } from '../../../mixins/branding';
import type { FontSize } from '../../../mixins/typography';
import type { ContainerProps } from '../../../mixins/container';
import { Box } from '../../../primitives';

type SelectionIndicatorProps = {|
  ...ContainerProps,
  selectorOffset: { x: number, y: number },
  fontSize: FontSize,
|};

const getTransform = ({ selectorOffset: { x, y } }: SelectionIndicatorProps) =>
  `translate(${x}px, ${y}px)`;

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

export const SelectionIndicator: ComponentType<SelectionIndicatorProps> = styled(
  Box,
)`
  ${getSelectionIndicatorShape}
  animation: ${fadeIn} 250ms ease;
  animation-fill-mode: both;
  background: ${getPaletteColor('greyscale-black')};
  color: ${getPaletteColor('white')};
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: ${getTransform};
  transition: 150ms cubic-bezier(0.34, 0, 0.53, 1.3);
`;
