'use client'

import React, { useEffect, useState } from "react"
import { v4 as uuid4 } from 'uuid'
import { useReducerAtom } from "jotai/utils";
import { useSession } from "next-auth/react";
import TextareaAutosize from 'react-textarea-autosize';
import Chater from "./Chater";
import { getChatResponse } from "@/lib/utils";
import { BsFillSendFill } from "react-icons/bs";
import * as R from 'ramda'

const Form = ({ node, asideInstantAtom }) => {
  const { data: session } = useSession()
  const [asideInstant, dispatchAsideInstant] = useReducerAtom(asideInstantAtom, (prev, payload) => ({ ...prev, ...payload }))
  const [messages, setMessages] = useState(asideInstant?.messages ?? [])
  // const messageItem = useRef<unknown>(null)
  const [sessionName, setSessionName] = useState(asideInstant?.sessionName ?? uuid4())

  const [input, setInput] = useState('')
  const [isSending, setIsSending] = useState(false)

  useEffect(() => {
    dispatchAsideInstant({ messages, sessionName })
  }, [messages, sessionName])

  const onSend = async ({ text, ignoreQuestionMessage = false }: { text: string, ignoreQuestionMessage?: boolean }) => {
    // FIXME fixed assi id
    const assistantId = "8dcff108-64e8-11ef-826e-12e77c4cb76b"
    const newMessages = messages
    if (!ignoreQuestionMessage) {
      newMessages.push({ type: 'md', role: 'user', content: text })
    }
    const message = { type: 'md', role: 'assistant', content: '', isLoading: true }
    newMessages.push(message)
    setMessages(() => [...newMessages])
    // messageItem.current = message
    const [chunks, ctrl] = getChatResponse({
      text,
      assistantId,
      sessionName,
      // userId: session?.user?.id,
      // FIXME
      userId: '1c9dc4b-d95f-11ea-af4c-52540005ab01'
    })
    for await (const chunk of chunks) {
      message.content += chunk;
      setMessages(() => [...newMessages])
    }
    message.isLoading = false
    setMessages(() => [...newMessages])
    setIsSending(false)
    return message
  }

  const onCommit = async () => {
    const text = input
    setInput('')
    setIsSending(true)
    await onSend({ text })
  }

  return (
    <div className="w-full h-full flex relative">
      <Chater messages={messages} node={node}></Chater>
      <div className="absolute flex inset-x-2.5 bottom-2.5 w-auto">
        <TextareaAutosize className="textarea textarea-bordered pr-12 w-full resize-none" value={input} onChange={ev => setInput(ev.target.value)} maxRows={4} />
        <button className="btn btn-active btn-primary btn-sm absolute right-[8px] bottom-[8px] w-[2rem] px-0" disabled={isSending} onClick={onCommit}><BsFillSendFill size={18} /></button>
      </div>
    </div>
  )
}

export default React.memo(React.forwardRef(Form))