import * as React from 'react';
import ReactDOM from 'react-dom';
import { PlaySoundProps } from 'src/types/op-play-sound';

export const typeMap = {
  success:
    'https://aos-wms-test.oss-cn-shanghai.aliyuncs.com/sound/success.wav',
  error: 'https://aos-wms-test.oss-cn-shanghai.aliyuncs.com/sound/error.wav',
  warning:
    'https://aos-wms-test.oss-cn-shanghai.aliyuncs.com/sound/warning.wav',
  // 可继续扩展
};

export default function PlaySound(props: PlaySoundProps) {
  const {
    visible = true,
    type = 'success',
    src,
    autoPlay = true,
    loop = false,
    className,
    ...audioProps
  } = props;

  const audioSrc = src || (type ? typeMap[type] : '');

  return visible && audioSrc ? (
    <audio src={audioSrc} autoPlay={autoPlay} loop={loop} {...audioProps} />
  ) : null;
}

PlaySound.palySound = (props: any) => {
  let playSoundRoot = document.getElementById('op-pc-active-play-sound-root');
  if (!playSoundRoot) {
    playSoundRoot = document.createElement('div');
    playSoundRoot.id = 'op-pc-active-play-sound-root';
    document.body.appendChild(playSoundRoot);
  }

  ReactDOM.render(<PlaySound {...props} />, playSoundRoot);
};