import { useState, useEffect } from "reactn";
import { Pressable, TextInput, View, Image, Platform } from "react-native";
import { BlurView } from "expo-blur";

import { Fonts, gutters, Palette } from "../styles";
import Style from "../styles/Style";

import { chatsRef } from "../config/firebase";

import { icons } from "../assets";

import { isWeb } from "../hooks/useLayoutType.js";

import DocumentDropZone from "./DocumentDropZone.js";
import FilesPreview from "./FilesPreview.js";

const ChatInput = ({
  message,
  setMessage,
  onSendMessage,
  containerStyle = {},
  placeholder = "",
  chatID = null,
}) => {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    setFiles([]);
  }, [chatID]);

  const handleMessageObject = () => {
    if (message.length > 0 || files.length > 0) {
      onSendMessage({
        customPayload: {
          files,
        },
      });
      setMessage("");
      setFiles([]);
    }
  };

  const handleKeyPress = (e) => {
    if (e?.nativeEvent?.key?.toLowerCase() === "enter") {
      handleMessageObject();
    }
  };

  return (
    <View
      style={{
        ...Style.containerItem,
        backgroundColor: Palette.transparentDarkPurple,
        justifyContent: "center",
        borderWidth: 1,
        borderColor: Palette.ultraLightWhite,
        overflow: "hidden",
        width: "100%",
        height: "auto",
        padding: 0,
        ...containerStyle,
      }}
    >
      <BlurView
        intensity={Platform.OS !== "ios" ? 10 : 30}
        tint="dark"
        style={{ flex: 1, justifyContent: "center" }}
        // experimentalBlurMethod={
        //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        // }
      >
        <FilesPreview
          files={files}
          setFiles={setFiles}
          containerStyle={{ margin: gutters / 2, marginBottom: 0 }}
        />

        <View style={{ ...Style.containerRow, height: 50 }}>
          <DocumentDropZone
            documentID={chatID}
            collectionRef={chatsRef}
            shouldReturnObject
            setFiles={setFiles}
            customElement={() => (
              <View style={{ width: 50, ...Style.containerCenter }}>
                <Image
                  resizeMode="contain"
                  source={icons.addFile}
                  style={{
                    ...Style.iconSmall,
                  }}
                />
              </View>
            )}
          />

          <TextInput
            numberOfLines={1}
            placeholder={placeholder}
            placeholderTextColor={Palette.white}
            value={message}
            onChangeText={setMessage}
            style={{
              width: "85%",
              ...Fonts({ type: "default", style: {} }),
            }}
            keyboardAppearance="dark"
            {...(!isWeb
              ? {
                  returnKeyType: "send",
                  onSubmitEditing: onSendMessage,
                }
              : {
                  onKeyPress: handleKeyPress,
                })}
          />

          <Pressable
            onPress={handleMessageObject}
            style={{
              position: "absolute",
              top: 0,
              right: 0,
              bottom: 0,
              width: 50,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Image
              resizeMode="contain"
              source={icons.send}
              style={{
                ...Style.iconSmall,
              }}
            />
          </Pressable>
        </View>
      </BlurView>
    </View>
  );
};

export default ChatInput;