import React, { useCallback } from 'react'
import { Alert, StyleSheet, View } from 'react-native'
import { Button } from '../../components'
import { useTheme } from '../../hooks'
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
import { ImagePicker } from '../../utils/native_adapters'
import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'

const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB

interface UploadTabProps {
  imagePreviewUri: string | null
  onImageSelect: (asset: ImagePickerAsset) => void
}

export function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps) {
  const styles = useStyles()

  const pickImage = useCallback(async () => {
    const result = await ImagePicker.openImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      allowsMultipleSelection: false,
    })

    if (result.canceled || !result.assets?.[0]) return

    const asset = result.assets[0]

    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
      Alert.alert('Image too large', 'Please choose an image under 10MB.')
      return
    }

    onImageSelect(asset)
  }, [onImageSelect])

  return (
    <View style={styles.container}>
      <Button
        title={imagePreviewUri ? 'Change photo' : 'Choose photo'}
        iconNameLeft="general.image"
        onPress={pickImage}
        variant="outline"
        appearance="interaction"
        size="md"
        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
      />
    </View>
  )
}

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

  return StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.fillColorNeutral100Inverted,
    },
  })
}