import { MaterialIcons } from '@expo/vector-icons'
import React from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
import { ThemedView } from '@/components/ThemedView'

import {
  getLocationAsync,
  pickImageAsync,
  takePictureAsync,
} from '@/components/chat/mediaUtils'

export default class AccessoryBar extends React.Component<any> {
  render () {
    const { onSend, isTyping } = this.props

    return (
      <ThemedView style={styles.container}>
        <Button onPress={() => pickImageAsync(onSend)} name='photo' />
        <Button onPress={() => takePictureAsync(onSend)} name='camera' />
        <Button onPress={() => getLocationAsync(onSend)} name='my-location' />
        <Button
          onPress={() => {
            isTyping()
          }}
          name='chat'
        />
      </ThemedView>
    )
  }
}

const Button = ({
  onPress,
  size = 30,
  color = 'rgba(255,255,255, 0.8)',
  ...props
}) => (
  <TouchableOpacity onPress={onPress}>
    <MaterialIcons size={size} color={color} {...props} />
  </TouchableOpacity>
)

const styles = StyleSheet.create({
  container: {
    height: 44,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: 'rgba(0,0,0,0.3)',
  },
})