import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { mergeStyles } from '../../styles/mergeStyles';

/**
 * Interface for styles to be applied to the audio player component
 */
export interface AudioPlayerStyles {
  container?: CSSProperties;
  audio?: CSSProperties;
}
/**
 * Interface for the AudioPlayer component
 */
interface AudioPlayerProps extends React.HTMLProps<HTMLAudioElement> {
  styleOverwrites?: AudioPlayerStyles;
}

/**
 * The default styles for the audio player
 */
const audioPlayerStyles: AudioPlayerStyles = {
  container: {},
  audio: {}
};

/**
 * A simple audio player component that plays audio files.
 */
export const AudioPlayer = observer((props: AudioPlayerProps) => {
  const { styleOverwrites, src } = props;
  const localStyles = {
    audio: mergeStyles(audioPlayerStyles.audio, styleOverwrites?.audio),
    container: mergeStyles(
      audioPlayerStyles.container,
      styleOverwrites?.container
    )
  };

  return (
    <div {...css(localStyles.container)}>
      <audio controls>
        <source src={src} type="audio/ogg" />
        <source src={src} type="audio/mpeg" />
      </audio>
    </div>
  );
});