import { observer } from 'mobx-react';
import { merge, useApphouse } from '../..';
import React from 'react';
import { css, keyframes } from 'glamor';

export type PlayPauseButtonSize =
  | 'small'
  | 'medium'
  | 'large'
  | 'xLarge'
  | 'xxLarge';
const spin = keyframes({
  '0%': { transform: 'rotate(0deg)' },
  '100%': { transform: 'rotate(360deg)' }
});

const getWidth = (size: PlayPauseButtonSize) => {
  switch (size) {
    case 'small':
      return 20;
    case 'medium':
      return 30;
    case 'large':
      return 40;
    case 'xLarge':
      return 60;
    case 'xxLarge':
      return 80;
    default:
      return 20;
  }
};

const getButtonStyles = (color: string, size: PlayPauseButtonSize) => {
  const width = getWidth(size);
  const dim = `${width}px`;
  const halfDim = `${width / 2}px`;
  const borderWidth = `${width * 0.25}px`;
  const borderWidthPlay = `${width * 0.2}px`;
  return {
    container: {
      display: 'inline-block',
      position: 'relative'
    },
    control: {
      bottom: halfDim,
      width: dim,
      height: dim,
      right: halfDim,
      cursor: 'pointer'
    },
    border: {
      width: '100%',
      height: '100%',
      border: `1px solid ${color}`,
      borderRadius: dim
    },
    isPlayingBorder: {
      borderTop: 'none',
      borderBottom: 'none',
      animation: `${spin} 1.5s ease-in-out infinite`
    },
    play: {
      position: 'absolute',
      top: `${width * 0.28}px`,
      left: `${width * 0.45}px`,
      boxSizing: 'border-box',
      height: `${width * 0.4}px`,
      width: `${width * 0.25}px`,
      borderColor: `transparent transparent transparent ${color}`,
      transition: '100ms all ease',
      willChange: 'border-width',
      cursor: 'pointer',

      // play state
      borderStyle: 'solid',
      borderWidth: `${borderWidth} 0 ${borderWidth} ${borderWidth}`
    },
    isPlayingPlay: {
      borderStyle: 'double',
      borderWidth: `0px 0px 0px ${borderWidthPlay}`,
      transform: 'translate(-1px, 1px)'
    }
  };
};

export interface PlayPauseButtonProps {
  isPlaying?: boolean;
  onClick?: () => void;
  color?: string;
  /**
   * @default 'medium'
   */
  size?: PlayPauseButtonSize;
}
export const PlayPauseButton: React.FC<PlayPauseButtonProps> = observer(
  (props) => {
    const {
      theme: { colors }
    } = useApphouse();
    const { isPlaying, onClick, size = 'medium' } = props;
    const componentStyles = getButtonStyles(
      props.color || colors.onPrimary,
      size
    );
    const borderStyles = merge(
      {},
      componentStyles.border,
      isPlaying ? componentStyles.isPlayingBorder : {}
    );

    const playStyles = merge(
      {},
      componentStyles.play,
      isPlaying ? componentStyles.isPlayingPlay : {}
    );

    return (
      <div
        role="button"
        tabIndex={0}
        onClick={onClick}
        {...css(componentStyles.container)}
      >
        <div {...css(componentStyles.control)}>
          <div {...css(borderStyles)}></div>
          <div {...css(playStyles)}></div>
        </div>
      </div>
    );
  }
);