import { View, StyleSheet } from 'react-native'
import { useTheme } from '../../hooks'
import { platformFontWeightMedium } from '../../utils'
import { tokens } from '../../vendor/tapestry/tokens'
import { Icon } from './icon'
import { IconButton } from './icon_button'
import { Spinner } from './spinner'
import { Text } from './text'

interface VideoAttachmentPreviewProps {
  name: string
  duration?: string
  onRemovePress: () => void
  loading?: boolean
  error?: boolean
  hideRemoveButton?: boolean
}

export const VideoAttachmentPreview = ({
  name,
  duration,
  onRemovePress,
  loading = false,
  error = false,
  hideRemoveButton = false,
}: VideoAttachmentPreviewProps) => {
  const styles = useStyles({ error })

  if (loading) {
    return (
      <View style={styles.container}>
        <Spinner size={20} style={styles.spinner} />
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Icon name="general.outlinedVideoFile" size={18} style={styles.fileIcon} />
        <View style={styles.textContainer}>
          <Text
            variant="tertiary"
            numberOfLines={1}
            style={styles.nameText}
            accessibilityLabel={`Video attachment: ${name}`}
          >
            {name}
          </Text>
          {duration && (
            <Text
              variant="tertiary"
              numberOfLines={1}
              style={styles.durationText}
              accessibilityLabel={`Duration: ${duration}`}
            >
              {duration}
            </Text>
          )}
        </View>
      </View>
      {!hideRemoveButton && (
        <IconButton
          name="general.x"
          onPress={onRemovePress}
          size="xxs"
          appearance="neutral"
          style={styles.closeButton}
          accessibilityLabel="Remove video attachment"
        />
      )}
      {error && (
        <View style={styles.errorBadge}>
          <Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon} />
        </View>
      )}
    </View>
  )
}

const useStyles = ({ error }: Partial<VideoAttachmentPreviewProps>) => {
  const { colors } = useTheme()
  const borderRadius = 8

  return StyleSheet.create({
    container: {
      height: 60,
      minWidth: 150,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: 8,
      backgroundColor: colors.fillColorNeutral070,
      borderColor: error ? colors.statusErrorBorder : colors.borderColorDefaultBase,
      borderWidth: error ? 2 : 1,
      borderRadius,
      padding: 4,
    },
    contentContainer: {
      flexDirection: 'row',
      gap: 8,
      alignItems: 'center',
      flexShrink: 1,
      paddingHorizontal: 8,
      paddingVertical: 4,
    },
    textContainer: {
      flexShrink: 1,
      flexDirection: 'column',
    },
    fileIcon: {
      color: error ? colors.iconColorDefaultDisabled : colors.iconColorDefaultPrimary,
    },
    nameText: {
      color: error ? colors.textColorDefaultDisabled : colors.textColorDefaultPrimary,
      fontWeight: platformFontWeightMedium,
      flexShrink: 1,
    },
    durationText: {
      color: error ? colors.textColorDefaultDisabled : colors.textColorDefaultPrimary,
    },
    closeButton: {
      backgroundColor: colors.fillColorNeutral050Base,
      borderRadius: 16,
      height: 20,
      width: 20,
      alignSelf: 'flex-start',
    },
    errorBadge: {
      backgroundColor: colors.statusErrorBorder,
      position: 'absolute',
      bottom: 0,
      right: 0,
      zIndex: 2,
      borderStartStartRadius: borderRadius,
      padding: 4,
    },
    errorIcon: {
      color: tokens.colorNeutral100White,
      transform: [{ translateX: 1 }],
      fontSize: 10,
    },
    spinner: {
      marginHorizontal: 'auto',
    },
  })
}