import React from 'react';
import {
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {useStore} from 'react-redux';
import {
  MessageInputProps,
  useMessageInputContext,
} from 'stream-chat-react-native';
import UpArrowIcon from '../../assets/icons/up_arrow.svg';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {RootState} from '../../store/rootReducer';
import {
  LocalAttachmentType,
  LocalChannelType,
  LocalCommandType,
  LocalEventType,
  LocalMessageType,
  LocalReactionType,
  LocalUserType,
} from '../../types';

const ChatInput: React.FC<
  MessageInputProps<
    LocalAttachmentType,
    LocalChannelType,
    LocalCommandType,
    LocalEventType,
    LocalMessageType,
    LocalReactionType,
    LocalUserType
  >
> = () => {
  const state: RootState = useStore().getState();
  const avatar = state.user.avatar;
  const {sendMessage, setText, text} = useMessageInputContext();

  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Image
          style={styles.avatar}
          source={
            avatar
              ? {uri: avatar}
              : require('../../assets/images/avatar-placeholder.png')
          }
        />
        <TextInput
          style={styles.text}
          placeholder={'Message...'}
          placeholderTextColor="grey"
          multiline={true}
          value={text}
          onChangeText={setText}
        />
        <View style={styles.submitButton}>
          <TouchableOpacity style={styles.submitButton} onPress={sendMessage}>
            <UpArrowIcon width={35} height={35} color={'white'} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    width: '100%',
  },
  textContainer: {
    width: '95%',
    flexDirection: 'row',
    backgroundColor: '#e8e8e8',
    alignItems: 'center',
    justifyContent: 'space-between',
    margin: '3%',
    borderRadius: 25,
  },
  text: {
    flex: 1,
    padding: '1%',
    marginHorizontal: '1%',
  },
  avatar: {
    height: 35,
    width: 35,
    borderRadius: 30,
    marginRight: 10,
    marginLeft: '3%',
    marginVertical: '2%',
    alignSelf: 'flex-end',
  },
  submitButton: {
    height: 35,
    width: 35,
    backgroundColor: TAGG_LIGHT_BLUE,
    borderRadius: 999,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: '3%',
    marginVertical: '2%',
    alignSelf: 'flex-end',
  },
  whiteBackround: {
    backgroundColor: '#fff',
  },
});

export default ChatInput;