import { MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ThemedView } from '@/components/theme/Theme';
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: 45,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: 'rgba(255,255,255,0.3)',
  },
});