water-sys/app/screens/ChatScreen.tsx

import React, { useState } from "react";
import customRF from '../utils/customRF';

import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  FlatList,
  KeyboardAvoidingView,
  Platform,
  ImageBackground,
  StatusBar,
  SafeAreaView
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

import { useTranslation } from 'react-i18next';



interface Message {
  id: string;
  text: string;
  isMe: boolean;
  timestamp: Date;
}

type TabType = "customer" | "product" | "notification";

export const ChatScreen = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputText, setInputText] = useState("");
  const [activeTab, setActiveTab] = useState<TabType>("customer");
  const { t } = useTranslation();

  const sendMessage = () => {
    if (inputText.trim() === "") return;

    const newMessage: Message = {
      id: Date.now().toString(),
      text: inputText,
      isMe: true,
      timestamp: new Date(),
    };

    setMessages([...messages, newMessage]);
    setInputText("");
  };

  const renderMessage = ({ item }: { item: Message }) => (
    <View
      style={[
        styles.messageContainer,
        item.isMe ? styles.myMessage : styles.theirMessage,
      ]}
    >
      <Text style={styles.messageText}>{item.text}</Text>
      <Text style={styles.timestamp}>
        {item.timestamp.toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        })}
      </Text>
    </View>
  );

  const renderTabContent = () => {
    switch (activeTab) {
      case "customer":
        return (
          <View style={styles.tabContent}>
            <FlatList
              data={messages}
              renderItem={renderMessage}
              keyExtractor={(item) => item.id}
              contentContainerStyle={styles.messageList}
              showsVerticalScrollIndicator={false}
            />
          </View>
        );
      case "product":
        return (
          <View style={styles.tabContent}>
            <FlatList
              data={messages}
              renderItem={renderMessage}
              keyExtractor={(item) => item.id}
              contentContainerStyle={styles.messageList}
              showsVerticalScrollIndicator={false}
            />
          </View>
        );
      case "notification":
        return (
          <View style={styles.tabContent}>
            <FlatList
              data={messages}
              renderItem={renderMessage}
              keyExtractor={(item) => item.id}
              contentContainerStyle={styles.messageList}
              showsVerticalScrollIndicator={false}
            />
          </View>
        );
    }
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <View style={styles.container}>
          <ImageBackground
            source={require('../../assets/img/DefaultWallpaper.png')}
            style={styles.backgroundImage}
            resizeMode="cover"
          >
            <View style={styles.tabBar}>
              <TouchableOpacity
                style={[styles.tab, activeTab === "customer" && styles.activeTab]}
                onPress={() => setActiveTab("customer")}
              >
                <Text
                  style={[
                    styles.tabText,
                    activeTab === "customer" && styles.activeTabText,
                  ]}
                >
                  {t('customerServiceChat')}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.tab, activeTab === "product" && styles.activeTab]}
                onPress={() => setActiveTab("product")}
              >
                <Text
                  style={[
                    styles.tabText,
                    activeTab === "product" && styles.activeTabText,
                  ]}
                >
                  {t('productChat')}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.tab, activeTab === "notification" && styles.activeTab]}
                onPress={() => setActiveTab("notification")}
              >
                <Text
                  style={[
                    styles.tabText,
                    activeTab === "notification" && styles.activeTabText,
                  ]}
                >
                  {t('notificationChat')}
                </Text>
              </TouchableOpacity>
            </View>

            {renderTabContent()}

            <View style={styles.inputContainer}>
              <TextInput
                style={styles.input}
                value={inputText}
                onChangeText={setInputText}
                placeholder={t('inputMessage')}
                multiline
              />
              <TouchableOpacity style={styles.sendButton} onPress={sendMessage}>
                <Text style={styles.sendButtonText}>{t('send')}</Text>
              </TouchableOpacity>
            </View>
          </ImageBackground>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? 0 : 0,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  tabBar: {
    flexDirection: "row",
    backgroundColor: "#007a6c",
    borderBottomWidth: 1,
    borderBottomColor: "#eef0f1",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  tab: {
    flex: 1,
    paddingVertical: 15,
    alignItems: "center",
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: "#eef0f1",
  },
  tabText: {
    fontSize: customRF(14),
    color: "#fff",
  },
  activeTabText: {
    color: "#fff",
    fontWeight: "600",
  },
  tabContent: {
    flex: 1,
  },
  messageList: {
    padding: 10,
  },
  messageContainer: {
    maxWidth: "80%",
    padding: 10,
    borderRadius: 10,
    marginVertical: 5,
  },
  myMessage: {
    alignSelf: "flex-end",
    backgroundColor: "#dcf8c6",
  },
  theirMessage: {
    alignSelf: "flex-start",
    backgroundColor: "white",
  },
  messageText: {
    fontSize: 16,
  },
  timestamp: {
    fontSize: 12,
    color: "#666",
    alignSelf: "flex-end",
    marginTop: 5,
  },
  inputContainer: {
    flexDirection: "row",
    padding: 10,
    backgroundColor: "white",
    borderTopWidth: 1,
    borderTopColor: "#ddd",
  },
  input: {
    flex: 1,
    backgroundColor: "#f0f0f0",
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingVertical: 8,
    marginRight: 10,
    maxHeight: 100,
  },
  sendButton: {
    backgroundColor: "#128C7E",
    borderRadius: 20,
    paddingHorizontal: 20,
    justifyContent: "center",
  },
  sendButtonText: {
    color: "white",
    fontSize: 16,
  },
});