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>
  )
}