import * as React from 'react';
import { FC } from 'react';
import { style } from 'typestyle';
import { pillActiveBackgroundColor, pillBackgroundColor } from '../../consts';

interface PlayerNavButtonProps {
  direction: 'left' | 'right' | 'up' | 'down';
  onClick: () => void;
  ariaLabel?: string;
  disabled?: boolean;
}

const defaultLabel = (dir: PlayerNavButtonProps['direction']) => {
  if (dir === 'left') return 'Previous';
  if (dir === 'right') return 'Next';
  if (dir === 'up') return 'Previous';
  return 'Next';
};

const svgPath = (dir: PlayerNavButtonProps['direction']) => {
  switch (dir) {
    case 'left':  return 'M15 18l-6-6 6-6';
    case 'right': return 'M9 18l6-6-6-6';
    case 'up':    return 'M18 15l-6-6-6 6';
    case 'down':  return 'M6 9l6 6 6-6';
  }
};

const PlayerNavButton: FC<PlayerNavButtonProps> = ({
  direction,
  onClick,
  ariaLabel,
  disabled = false,
}) => (
  <button
    type='button'
    className={`${styles.button} ${disabled ? styles.buttonDisabled : ''}`}
    onClick={disabled ? undefined : onClick}
    aria-label={ariaLabel ?? defaultLabel(direction)}
    aria-disabled={disabled}
    tabIndex={disabled ? -1 : 0}
  >
    <svg viewBox='0 0 24 24' width='22' height='22' aria-hidden='true'>
      <path
        d={svgPath(direction)}
        stroke='white'
        strokeWidth='2.5'
        fill='none'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
    </svg>
  </button>
);

export default PlayerNavButton;

const styles = {
  button: style({
    flexShrink: 0,
    width: 40,
    height: 40,
    padding: '5px',
    borderRadius: '50%',
    border: 'none',
    backgroundColor: pillBackgroundColor,
    backdropFilter: 'blur(3px)',
    '-webkit-backdrop-filter': 'blur(3px)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    transition: 'opacity 0.2s ease',
    $nest: {
      '&:active': {
        backgroundColor: pillActiveBackgroundColor,
      },
      '&:focus-visible': {
        outline: '2px solid white',
        outlineOffset: '2px',
      },
    },
  }),

  buttonDisabled: style({
    opacity: 0.25,
    cursor: 'default',
    pointerEvents: 'none' as const,
  }),
};