'use client'

import React, { useEffect, useRef, useState } from "react"
import * as R from 'ramda'
import markdownit from 'markdown-it'
import { v4 as uuid4 } from 'uuid'
import TextareaAutosize from 'react-textarea-autosize';
import { BsFillSendFill } from "react-icons/bs";


import Chater from './Chater'
import { useReducerAtom } from "jotai/utils"
import { getChatResponse, template } from "@/lib/utils"
import { useSession } from "next-auth/react"
import { useAtomValue } from "jotai"
import { cardInstantAtomFamily, curStepAtom, instantDataAtom, stepsNodesAtom } from "../../store"


const Agent = ({ 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 stepsNodes = useAtomValue(stepsNodesAtom)
  const curStep = useAtomValue(curStepAtom)
  const instantData = useAtomValue(instantDataAtom)

  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 }) => {
    const assistantId = R.path(['properties', 'item', 'assistant_id'], node)
    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 onFirstSend = async () => {
    const prevNodes = R.slice(0, curStep, stepsNodes)
    const prevFormNodes = R.filter(R.propEq('form_card', 'type'), prevNodes)
    const prevFormInstants = R.map(_node => instantData?.[_node.id], prevFormNodes)
    const formContext = R.join('\n\n', R.map(
      formInstant => { return R.join('\n', R.map(fieldInstant => `${fieldInstant.label}: ${fieldInstant.value}`, R.values(formInstant.content ?? {}))) },
      prevFormInstants
    ))

    let nodeContext = R.pathOr('', ['properties', 'dispo_desc'], node)
    const replacementArray = R.pathOr('', ['properties', 'dispo_arr'], node)
    nodeContext = R.reduce(
      (prev, { desc, id }: { desc: string, id: string }) => {
        const to = instantData?.[id]?.content ?? ''
        return R.replace(`[${desc}]`, to, prev)
      },
      nodeContext,
      replacementArray
    )
    const text = `
    ${formContext}
    ${nodeContext}
    `
    setIsSending(true)
    const message = await onSend({ text, ignoreQuestionMessage: true })
    dispatchCardInstantData({ content: markdownit().render(message.content) })
  }

  let firstMark = true
  useEffect(() => {
    if (!messages?.length && firstMark) {
      firstMark = false
      onFirstSend()
    }
  }, [])

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

  const cardInstantAtom = cardInstantAtomFamily(node.id)

  const dataReducer = (prev, payload) => {
    return { ...prev, ...payload }
  }

  const [, dispatchCardInstantData] = useReducerAtom(cardInstantAtom, dataReducer)

  const onAccept = (message) => {
    const content = markdownit().render(message.content)
    dispatchCardInstantData({ content })
  }

  return (
    <div className="w-full h-full flex relative">
      <Chater messages={messages} node={node} onAccept={onAccept}></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(Agent))