import { css } from 'glamor';
import { observer } from 'mobx-react';

export interface FlipProps {
  /**
   * The orientation of the flip
   * @default bottomToTop
   */
  direction?: 'bottomToTop' | 'topToBottom';
  children: React.ReactNode;
}
/**
 * A component that flips the direction of the children element
 */
export const Flip = observer((props: FlipProps) => {
  const { children, direction = 'bottomToTop' } = props;
  let transform = 'rotate(-90deg)';
  let transformOrigin = 'right';
  switch (direction) {
    case 'topToBottom':
      transform = 'rotate(90deg)';
      transformOrigin = 'left';
      break;
    case 'bottomToTop':
      transform = 'rotate(-90deg)';
      transformOrigin = 'right';
      break;
  }
  return (
    <div
      {...css({
        position: 'relative',
        transformOrigin: transformOrigin,
        transform: transform
      })}
      data-id="Flip"
    >
      {children}
    </div>
  );
});