import { PlatformPressable } from '@react-navigation/elements'
import React from 'react'
import { View, StyleSheet } from 'react-native'
import { useTheme } from '../../../hooks'
import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
import { Audio } from '../../../utils/native_adapters'
import { IconButton, Text } from '../../display'
import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'

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

  const { attributes } = attachment
  const { url, filename } = attributes
  const sound = Audio.useAudio(url)
  const { AudioPlayer } = sound

  function toggleAudio() {
    if (!sound.isPlaying) {
      sound.play()
    } else {
      sound.pause()
    }
  }

  const progress = sound.duration > 0 ? sound.position / sound.duration : 0

  return (
    <PlatformPressable
      onLongPress={() => !isDeleting && onMessageAttachmentLongPress(attachment)}
      android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}
      accessibilityHint="Long press for more options"
      disabled={isDeleting}
    >
      <AttachmentCard>
        <View style={styles.container}>
          {AudioPlayer}
          <IconButton
            name={sound.isPlaying ? 'services.pause' : 'services.play'}
            size="md"
            accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}
            onPress={toggleAudio}
            disabled={!sound || isDeleting}
            style={styles.button}
            iconStyle={styles.buttonIcon}
          />
          <View style={styles.details}>
            <AttachmentCardTitle>{filename}</AttachmentCardTitle>
            <View style={styles.progressContainer}>
              <View style={styles.progressTrack}>
                <View style={[styles.progressBar, { width: `${progress * 100}%` }]} />
              </View>
            </View>
            {sound.isPlaying ? (
              <ProgressionText progress={sound.position || 0} />
            ) : (
              <DurationText duration={sound.duration || 0} />
            )}
          </View>
        </View>
        {isDeleting && <AttachmentDeletingOverlay />}
      </AttachmentCard>
    </PlatformPressable>
  )
}

const DurationText = ({ duration }: { duration: number }) => {
  if (duration === 0) return <Text variant="footnote">Loading...</Text>

  const { minutes, seconds } = getMinutesAndSeconds(duration)
  const secondsLabel = `${seconds}s`
  const minutesLabel = `${minutes}m`
  const label = minutes > 0 ? `${minutesLabel} ${secondsLabel}` : secondsLabel

  return <Text variant="footnote">{label}</Text>
}

const ProgressionText = ({ progress }: { progress: number }) => {
  if (progress === 0) return <Text variant="footnote">Loading...</Text>

  const { minutes, seconds } = getMinutesAndSeconds(progress)
  const twoDigitSeconds = seconds.toString().padStart(2, '0')
  const twoDigitMinutes = minutes.toString().padStart(2, '0')

  return <Text variant="footnote">{`${twoDigitMinutes}:${twoDigitSeconds}`}</Text>
}

function getMinutesAndSeconds(ms?: number) {
  if (!ms || ms === 0) return { minutes: 0, seconds: 0 }

  const totalSeconds = Math.floor(ms / 1000)
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = totalSeconds % 60

  return { minutes, seconds }
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    button: {
      width: 42,
      height: 42,
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 25,
      backgroundColor: colors.fillColorNeutral100Inverted,
      borderColor: colors.borderColorDefaultBase,
      borderWidth: 1,
    },
    buttonIcon: {
      color: colors.iconColorDefaultPrimary,
    },
    buttonText: {
      fontSize: 32,
      lineHeight: 32,
    },
    details: {
      flex: 1,
      marginLeft: 10,
      gap: 4,
    },
    progressContainer: {
      marginTop: 2,
    },
    progressTrack: {
      height: 4,
      backgroundColor: colors.borderColorDefaultBase,
      borderRadius: 2,
      overflow: 'hidden',
    },
    progressBar: {
      height: '100%',
      borderRadius: 2,
      backgroundColor: colors.interaction,
    },
  })
}