// @flow
import { css, keyframes } from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import { getFontSize } from '../../../mixins/typography';
import { fadeColor } from '../../../utils/color';
import type { ThemeProps } from '../../../types';

export const getTabButtonFontSize = ({ theme }: ThemeProps) =>
  getFontSize({ theme, fontSize: 'f1' });

export const getBgColor = ({
  theme,
  selected,
}: {|
  ...ThemeProps,
  selected: boolean,
|}) =>
  getPaletteColor(selected ? 'greyscale-dark' : 'greyscale-light')({ theme });

export const getColor = ({
  theme,
  selected,
}: {|
  ...ThemeProps,
  selected: boolean,
|}) => getPaletteColor(selected ? 'white' : 'greyscale-black')({ theme });

export const getBoxShadow = ({ theme }: ThemeProps) =>
  `0 3px 10px 0 ${fadeColor(
    getPaletteColor('greyscale-black')({ theme }),
    0.95,
  )}`;

const fadeToRight = keyframes`
  0% {
    transform: translate(0);
  }
`;

const fadeToLeft = keyframes`
  0% {
    transform: translate(100%);
  }
`;

export const getAnimation = ({
  selected,
  currentIndex,
  prevTabIndex,
}: {|
  selected: boolean,
  currentIndex: number,
  prevTabIndex?: number,
|}) => {
  if (prevTabIndex == null || prevTabIndex === currentIndex) {
    return '';
  }

  const keyFrameName = currentIndex > prevTabIndex ? fadeToRight : fadeToLeft;

  if (selected) {
    return css`
      animation: ${keyFrameName} ease 0.2s;
      animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      animation-fill-mode: forwards;
    `;
  }

  return '';
};
