import { IonButton } from '@ionic/react';
import { FunctionComponent, useEffect } from 'react';
import { useGlobalAudioPlayer } from 'react-use-audio-player';
import { useMyIonMetric } from '../../../contexts/MyIonMetric';
import { useListeningPracticeTimeSpent } from '../../../contexts/MyIonMetric/ListeningPracticeTimeSpent';
// import { useMyIonMetric } from '../../contexts/MyIonMetric';

export const AudioControls: FunctionComponent<{ audio_src: string }> = ({ audio_src }) => {
  const { play, pause, playing, duration } = useGlobalAudioPlayer();
  const { load, src: loadedSrc } = useGlobalAudioPlayer();
  let { myIonMetricIncListeningPracticeTimeSpent } = useListeningPracticeTimeSpent();

  useEffect(() => {
    load(audio_src);
  }, []);

  useEffect(() => {
    if (loadedSrc) {
      // TODO: delete this ?
      // play();
      myIonMetricIncListeningPracticeTimeSpent(duration);
    }
  }, [loadedSrc]);

  return <></>;
};
