import { MaterialIcons } from '@expo/vector-icons'
import { VideoView, useVideoPlayer } from 'expo-video'
import React, { useEffect, useMemo, useState } from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'

const BackgroundVideo = ({ source, silent = false }) => {
  const [muted, setMuted] = useState(false)
  const resolvedSource = useMemo(
    () => (source ? (typeof source === 'string' ? { uri: source } : source) : null),
    [source]
  )

  const player = useVideoPlayer(resolvedSource, (nextPlayer) => {
    nextPlayer.loop = true
  })

  useEffect(() => {
    if (!source) {
      player?.pause?.()
      return
    }

    player.muted = silent || muted
    player.play()
  }, [muted, player, silent, source])

  if (!source) {
    return null
  }

  return (
    <View pointerEvents="box-none" style={styles.container}>
      <VideoView
        player={player}
        nativeControls={false}
        contentFit="cover"
        style={StyleSheet.absoluteFill}
      />
      <View pointerEvents="none" style={styles.scrim} />
      {!silent ? (
        <Pressable
          accessibilityRole="button"
          accessibilityLabel={muted ? 'Activer le son' : 'Couper le son'}
          onPress={() => setMuted((currentMuted) => !currentMuted)}
          style={({ pressed }) => [styles.soundButton, pressed && styles.soundButtonPressed]}
        >
          <MaterialIcons
            name={muted ? 'volume-off' : 'volume-up'}
            size={20}
            color="#FFFFFF"
          />
          <Text style={styles.soundButtonText}>
            {muted ? 'Activer le son' : 'Couper le son'}
          </Text>
        </Pressable>
      ) : null}
    </View>
  )
}

export default React.memo(BackgroundVideo)

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    overflow: 'hidden',
  },
  scrim: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(5, 7, 12, 0.52)',
  },
  soundButton: {
    position: 'absolute',
    top: 80,
    left: 16,
    zIndex: 30,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 22,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.42)',
    backgroundColor: 'rgba(7, 9, 14, 0.68)',
  },
  soundButtonPressed: {
    opacity: 0.78,
  },
  soundButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600',
  },
})