/** @jsx jsx */
import { jsx, keyframes } from '@emotion/core';
import styled from '@emotion/styled';
import { blue300, gray800 } from '../styles/colors_v2';
import { WalkthroughContext, WalkthroughStep } from '../hooks/useWalkthrough';
import { useContext } from 'react';

const hopAndWiggle = keyframes`
  0%    { transform: translateY(0px) rotate(5deg); }
  5%    { transform: translateY(-8px) rotate(-5deg); }
  10%   { transform: translateY(-9px) rotate(3deg); }
  15%   { transform: translateY(-9px) rotate(-3deg); }
  18%   { transform: translateY(-8px) rotate(0); }
  22%   { transform: translateY(4px) rotate(0); }
  25%   { transform: translateY(0px) rotate(0); }
  100%  { transform: translateY(0px) rotate(0); }
`;

const Wrapper = styled.div`
  position: absolute;
  padding: 10px;
  width: 180px;
  animation: ${hopAndWiggle} 2s linear infinite;
`;

const MainBody = styled.div`
  background-color: ${blue300};
  color: ${gray800};
  border-radius: 2px;
  padding: 8px;
  z-index: 100;
  position: relative;
`;

const Anchor = styled.div`
  position: absolute;
  bottom: 5px;
  left: 15px;
  width: 16px;
  height: 16px;
  background-color: ${blue300};
  transform: rotate(45deg);
`;

export default ({
  children,
  style = {},
  anchorStyle = {},
  step
}: {
  children: React.ReactNode[] | React.ReactNode,
  style?: any,
  anchorStyle?: any,
  step: WalkthroughStep
}) => {
  const walkthrough = useContext(WalkthroughContext);
  if (walkthrough.currentWalkthroughStep !== step) {
    return null;
  }
  return (
    <Wrapper style={style}>
      <Anchor style={anchorStyle} />
      <MainBody>
        {children}
      </MainBody>
    </Wrapper>
  )
}