import React from 'react';
import styles from './index.less';

import music from '../../assets/music.mp3';

const toPlay = play => {
  let audio = document.getElementById('audio');
  if (!audio) {
    audio = document.createElement('audio');
    audio.src = music;
    audio.id = 'audio';
    audio.loop = 'loop';
    audio.preload = 'auto';
    document.body.append(audio);
  }
  if (play) {
    audio.play();
  } else {
    audio.pause();
  }
};

export const Index = ({ play, onPlay, ...props }) => {
  window.onload = () => {
    document.addEventListener(
      'WeixinJSBridgeReady',
      () => {
        toPlay(play);
      },
      false,
    );
  };
  return (
    <div
      className={`${styles.icon} ${play ? styles.play : styles.playC}`}
      onClick={() => {
        toPlay(!play);
        onPlay();
      }}
    ></div>
  );
};

export default Index;