import React, { useEffect, useRef, useState } from 'react';
import * as FileSystem from 'expo-file-system';
import {
  PlayerState,
  Waveform,
  type IWaveformRef,
} from '@simform_solutions/react-native-audio-waveform';
import { Ionicons } from '@expo/vector-icons';
import { Text, View } from 'react-native';

interface AudioPlayerProps {
  audioUri: string;
}

export const AudioPlayer = ({ audioUri }: AudioPlayerProps) => {
  const ref = useRef<IWaveformRef>(null);
  const [localUri, setLocalUri] = useState<string | null>(null);
  const [isPlaying, setIsPlaying] = useState<PlayerState | undefined>(undefined);

  useEffect(() => {
    (async () => {
      try {
        if (audioUri.startsWith('https://')) {
          // Download the audio file from the remote URL
          const fileUri = `${FileSystem.cacheDirectory}${audioUri.split('/').pop()}`;
          const { exists } = await FileSystem.getInfoAsync(fileUri);

          if (!exists) {
            // If file doesn't exist locally, download it
            await FileSystem.downloadAsync(audioUri, fileUri);
          }

          setLocalUri(fileUri);
        } else {
          // If it's a local file, use it directly
          setLocalUri(audioUri);
        }
      } catch (error) {
        console.error('Error fetching or downloading audio:', error);
      }
    })();
  }, [audioUri]);

  if (!localUri) {
    return <Text style={{ color: 'black' }}>Loading Audio</Text>;
  }

  return (
    <View
      style={{
        flex: 1,
        padding: 0,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 20,
        minWidth: 200,
        backgroundColor: '#00000000',
      }}
    >
      {isPlaying !== 'playing' ? (
        <Ionicons
          onPress={() => ref.current?.startPlayer()}
          name="play"
          size={24}
          color='black'
        />
      ) : (
        <Ionicons
          onPress={() => ref.current?.pausePlayer()}
          name="pause-circle"
          size={24}
          color='black'
        />
      )}

      <Waveform
        ref={ref}
        mode="static"
        path={localUri}
        candleSpace={1}
        scrubColor="grey"
        candleHeightScale={10}
        waveColor='black'
        containerStyle={{ padding: 0, height: 40, flex: 1 }}
        onPanStateChange={(isMoving) => console.log(isMoving)}
        onPlayerStateChange={(playerState) => setIsPlaying(playerState)}
      />
    </View>
  );
};