import {FileItemShare} from './index'
import React, { useEffect, useRef, useState } from 'react';
import { Draggable } from 'devextreme-react';
import './index.css';
import { AiOutlineCloseCircle } from 'react-icons/ai';
import Speaker from './speaker/index';
import Menus from './menus/index';
import AudioProgress from './progress/index';
import AudioController from './controller/index';

interface IProps {
  share: FileItemShare;
  link:string;
  finished: () => void;
}

const AudioPlayer: React.FC<IProps> = ({ share, finished,link }) => {
  //当前播放的音频
  const [audioData, setAudioData] = useState(share);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const [progress, setProgress] = useState<number>(0);
  //音频播放列表
  const [audioFiles, setAudioFiles] = useState<FileItemShare[]>(
    [share]
  );
  useEffect(() => {
    setAudioData(share);
  }, [share]);

  const updateProgress = () => {
    if (audioRef.current) {
      setProgress(audioRef.current.currentTime);
    }
  };

  if (audioData.shareLink) {
    return (
      <Draggable className={'audio-drag-box'}>
        <AudioController
          audioFiles={audioFiles}
          audioData={audioData}
          setAudioData={setAudioData}
          audioRef={audioRef}
          finished={finished}></AudioController>
        <div className={'audio-bottom'}>
          <Speaker audioRef={audioRef}></Speaker>
          <AudioProgress audioRef={audioRef} progress={progress}></AudioProgress>
          <Menus
            audioFiles={audioFiles}
            audioData={audioData}
            setAudioData={setAudioData}
            setAudioFiles={setAudioFiles}></Menus>
          <AiOutlineCloseCircle
            className={'audio-close'}
            onClick={finished}></AiOutlineCloseCircle>
        </div>
        <audio
          autoPlay
          src={link}
          ref={audioRef}
          onTimeUpdate={updateProgress}></audio>
      </Draggable>
    );
  }
  finished();
  return <></>;
};

export default AudioPlayer;