import React, { useState, useGlobal } from "reactn";
import { useKeyboard } from "@react-native-community/hooks";

import { responsiveHeight } from "../actions/responsiveSizes.js";

import Page from "../layouts/Page";

import ChatInterface, { onSendMessage } from "../components/ChatInterface";
import ChatInput from "../components/ChatInput.js";
import useLayoutType from "../hooks/useLayoutType.js";

import { gutters } from "../styles/Style.js";

export default ({ navigation }) => {
  const [currentUID] = useGlobal("currentUID");
  const [currentProjectID] = useGlobal("currentProjectID");

  const [message, setMessage] = useState("");

  const chatID = `TEST_CHAT_ID`;

  const { isDesktop } = useLayoutType();
  const { keyboardShown = false, keyboardHeight = 0 } = useKeyboard();

  return (
    <Page headerType={isDesktop ? "NONE" : "BASE"}>
      <ChatInterface
        hasChatbot
        chatID={chatID}
        projectID={currentProjectID}
        inputStyle={{ bottom: responsiveHeight(15) }}
        messageListContainerStyle={{ flex: 1 }}
      />

      <ChatInput
        chatID={chatID}
        message={message}
        setMessage={setMessage}
        keyboardVerticalOffset={responsiveHeight(15)}
        onSendMessage={async ({ customPayload = {} } = {}) => {
          onSendMessage({
            message,
            setMessage,
            chatID,
            customPayload: { ...customPayload },
          });
        }}
        placeholder={"Laissez un commentaire..."}
        containerStyle={{
          position: "absolute",
          bottom: gutters * 6 + (keyboardShown ? keyboardHeight : 0),
          right: 0,
          left: 0,
          width: "auto",
        }}
      />
    </Page>
  );
};