import { PlatformPressable } from '@react-navigation/elements'
import React, { useRef, useState } from 'react'
import { View, StyleSheet } from 'react-native'
import { useTheme } from '../../../hooks'
import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
import { Video, VideoPlayerHandle } from '../../../utils/native_adapters'
import { tokens } from '../../../vendor/tapestry/tokens'
import { Icon } from '../../display'
import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'
import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'

export function VideoAttachment({
  attachment,
  onMessageAttachmentLongPress,
  isDeleting,
}: {
  attachment: DenormalizedMessageAttachmentResource
  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
  isDeleting: boolean
}) {
  const { colors } = useTheme()
  const styles = useStyles()

  const { attributes } = attachment
  const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =
    attributes.metadata || {}
  const { url } = attributes

  const videoRef = useRef<VideoPlayerHandle>(null)
  const [isOpen, setIsOpen] = useState(false)

  function openVideo() {
    if (!isOpen && videoRef.current) {
      videoRef.current.presentFullscreenPlayer()
      videoRef.current.play()
      setIsOpen(true)
    }
  }

  function closeVideo() {
    videoRef.current?.pause()
    setIsOpen(false)
  }

  const viewRef = useRef<View>(null)

  return (
    <View style={styles.container} ref={viewRef}>
      <PlatformPressable
        onPress={openVideo}
        onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
        android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
        accessibilityLabel="Play Video"
        accessibilityHint="Press to play video. Long press for more options"
        disabled={isDeleting}
      >
        <View style={styles.thumbnailOverlay} />
        <Video.Player
          ref={videoRef}
          source={{ uri: url }}
          aspectRatio={width / height}
          style={styles.video}
          onFullscreenDismiss={closeVideo}
        />
        {!isOpen && !isDeleting && (
          <View style={styles.playContainer}>
            <View style={styles.playCircle}>
              <Icon
                name="services.play"
                style={styles.playIcon}
                accessibilityElementsHidden={true}
              />
            </View>
          </View>
        )}
        {isDeleting && <AttachmentDeletingOverlay />}
      </PlatformPressable>
    </View>
  )
}
const OVERLAY_Z_INDEX = 1

const useStyles = () => {
  const { colors } = useTheme()
  const overlayBackgroundColor =
    colors.name === 'light'
      ? tokens.fillColorTransparencyDark010
      : tokens.fillColorTransparencyDark030

  return StyleSheet.create({
    container: {
      borderRadius: 8,
      overflow: 'hidden',
    },
    video: {
      width: '100%',
      backgroundColor: colors.fillColorNeutral070,
    },
    thumbnailOverlay: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: overlayBackgroundColor,
      zIndex: OVERLAY_Z_INDEX,
    },
    playContainer: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: OVERLAY_Z_INDEX + 1,
    },
    playCircle: {
      justifyContent: 'center',
      alignItems: 'center',
      width: 42,
      height: 42,
      borderRadius: 25,
      backgroundColor: colors.fillColorNeutral100Inverted,
      borderColor: colors.borderColorDefaultBase,
      borderWidth: 1,
    },
    playIcon: {
      fontSize: 20,
    },
  })
}